/*
 * CILI: the site's sign-in page (ADR-0039 D6; ADR-0023 D3's slot 6), loaded only on the account page for a guest
 * (cili/auth/auth.php), the page whose content is templates/auth/sections.php and forms.php.
 *
 * It is the app's light sign-in screen (the owner's requests of 2026-10-14; the app's lib/features/account/sign_in/
 * sign_in_screen.dart and lib/core/ui/leonacreo_theme.dart), as the sign-in modal was until ADR-0039: its rules are the
 * modal's (cili/auth/modal.css and design.css's `.ulz-modal-signin` block, both gone), scoped to the page's column
 * `.lcr-auth` instead of the modal, so the column renders as the modal's content did: the logo, the tabs as the app's
 * segmented control, the title in the app's display type, the black pills, the fields of the fill gray, the Artist and
 * Collector cards one above the other. What the modal's frame did (the sheet, the card, the close button, the overlay)
 * has no counterpart: the column stands in the page, centred, `web.container.auth` wide at most, the modal's own width.
 * And in Selenar's layout (Q127): the header is the centred logo, its navigation, search, actions and call to action,
 * the phone header's menu, search and sign-in, the phone's search bar, its bottom bar and its menu not displayed, so
 * that they are out of the Tab order too (`body.lcr-auth-page`, cili/auth/auth.php); the footer is Heilz's quiet
 * account footer (templates/account/footer.php).
 *
 * WEB-136 to WEB-138 measure every text at 4.5:1 at least and every control's boundary at 3:1. The app's field has no
 * border and its unchosen card a border of `outline`, both under 3:1 on white (1.1:1, 1.4:1), so here the field and the
 * card carry the `muted` gray as a hairline (5.3:1), the one place the page differs from the app's screen.
 */

/* The page: the column in the middle, under the header, the app's 40 above it and 48 below. */
html body.lcr-auth-page .lcr-auth {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lcr-web-container-auth);
	margin: var(--lcr-space-40) auto var(--lcr-space-48);
}

/* The column is the page's content: its own margins of 20 are the page's edges on a phone, as the modal's sheet had,
   so Heilz's row gives up its gutter here; WooCommerce's notices above it take the column's width and margins. */
html body.lcr-auth-page .ulz-container > .ulz-row {
	padding-right: 0;
	padding-left: 0;
}

html body.lcr-auth-page .woocommerce-notices-wrapper {
	box-sizing: border-box;
	max-width: var(--lcr-web-container-auth);
	margin: var(--lcr-space-20) auto 0;
	padding: 0 var(--lcr-space-20);
}

/* Heilz's row and content keep their own widths; the column is the page's only content. */
html body.lcr-auth-page .ulz-main,
html body.lcr-auth-page .ulz-content {
	width: 100%;
	max-width: none;
}

/* The header: the centred logo, nothing else, on the phone as on the desktop (Q127). */
html body.lcr-auth-page .ulz-header :is(.ulz-site-search, .ulz-site-nav, .ulz-site-actions, .ulz-site-cta),
html body.lcr-auth-page .ulz-mobile-header :is(.lcr-mobile-menu, .lcr-mobile-actions),
html body.lcr-auth-page .ulz-mobile-search,
html body.lcr-auth-page .ulz-mobile-bar,
html body.lcr-auth-page .ulz-mobile-nav {
	display: none;
}

html body.lcr-auth-page .ulz-header .ulz-header-container,
html body.lcr-auth-page .ulz-mobile-header {
	justify-content: center;
}

html body.lcr-auth-page .ulz-mobile-header .ulz--site-name {
	margin: 0 auto;
}

/* The quiet account footer (templates/account/footer.php): the company's line and the legal pages, in one centred run of
   the small muted type, as the site footer's legal line (Q127 (f)2). */
html body.lcr-auth-page .lcr-auth-footer .ulz-grid {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--lcr-space-8) var(--lcr-space-20);
	margin: 0;
	padding: var(--lcr-space-20) 0 var(--lcr-space-32);
	text-align: center;
}

html body.lcr-auth-page .lcr-auth-footer .ulz-grid > div {
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
	padding: 0;
}

html body.lcr-auth-page :is(.lcr-auth-footer-legal, .lcr-auth-footer-links) {
	margin: 0;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-small-font-size);
	line-height: var(--lcr-type-small-line-height);
}

html body.lcr-auth-page .lcr-auth-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lcr-space-4) var(--lcr-space-16);
	padding: 0;
	list-style: none;
}

html body.lcr-auth-page .lcr-auth-footer-links li {
	margin: 0;
}

html body.lcr-auth-page .lcr-auth-footer-links a {
	color: var(--lcr-color-muted);
	text-decoration: underline;
}

/* The page's one h1 is the step's title: the modal's title, with Heilz's heading margins gone. */
html body .lcr-auth .lcr-auth-heading {
	padding: 0;
}

html body .lcr-auth {
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
	--border: var(--lcr-color-divider);
	--form-background: var(--lcr-color-fill);
	--white: var(--lcr-color-background);
	--black: var(--lcr-color-ink);
	--error-background: transparent;
	--error: var(--lcr-color-ink);
	--success-background: transparent;
	--success: var(--lcr-color-ink);
	--form: var(--lcr-color-ink);
	--form-placeholder: var(--lcr-color-muted);
	/* The field's rule (layout-fields.css) reads its shadow from `--form-boundary`. */
	--form-boundary: inset 0 0 0 var(--lcr-size-hairline) var(--lcr-color-muted);
}

/* A link of the page is the ink, as the app's text buttons; the terms' links are underlined. */
html body .lcr-auth a {
	color: var(--lcr-color-ink);
}

html body .lcr-auth .ulz-checkbox .ulz--text a {
	text-decoration: underline;
}

/* The terms' box: the app's checkbox, a hairline of the `muted` gray while empty, the ink with a white tick once checked. */
html body .lcr-auth .ulz-checkbox .ulz--toggle {
	background-color: var(--lcr-color-background);
	box-shadow: inset 0 0 0 var(--lcr-size-hairline) var(--lcr-color-muted);
}

html body .lcr-auth .ulz-checkbox input:checked + .ulz--toggle {
	background-color: var(--lcr-color-ink);
	box-shadow: none;
}

html body .lcr-auth .ulz-checkbox .ulz--toggle::after {
	color: var(--lcr-color-on-ink);
}

/* The password's eye is the line icons' SVG (templates/auth/sections.php prints the eye and the struck eye), in
   the field's text colour; the second shows while the password does. */
html body .lcr-auth .toggle-password {
	display: flex;
	color: var(--lcr-color-ink);
	line-height: 0;
}

html body .lcr-auth .toggle-password .lcr-icon + .lcr-icon,
html body .lcr-auth .toggle-password.lcr-shown .lcr-icon:first-child {
	display: none;
}

html body .lcr-auth .toggle-password.lcr-shown .lcr-icon + .lcr-icon {
	display: block;
}

/* Its buttons are the app's primary: a black pill with white text (Heilz gives them a raised ink of its own). */
html body .lcr-auth .ulz-button,
html body .lcr-auth .ulz-button:hover {
	border: 0;
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}


/* The column: the modal's, the app's margins of 20 on each side. */
html body .lcr-auth .ulz-modal-container {
	padding: var(--lcr-space-8) var(--lcr-space-20) 0;
	font-family: var(--lcr-font-family-sans);
	color: var(--lcr-color-ink);
}

html body .lcr-auth .ulz-modal-footer-lcr,
html body .lcr-auth .lcr-auth-footer-create,
html body .lcr-auth .lcr-auth-footer-reset {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lcr-web-container-auth);
	margin: 0 auto;
	padding: var(--lcr-space-12) var(--lcr-space-20) var(--lcr-space-28);
}

/* The app's primary: a black pill of `size.control`, the whole column wide, its label in the label's type. */
html body .lcr-auth :is(.ulz-modal-footer-lcr, .lcr-auth-footer-create, .lcr-auth-footer-reset) .ulz-button:not([hidden]) {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--lcr-size-control);
	height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-20);
	border-radius: var(--lcr-radius-pill);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-type-label-font-weight);
	line-height: var(--lcr-type-label-line-height);
}

@media (hover: hover) {
	html body .lcr-auth .ulz-button:hover {
		background-color: var(--lcr-color-ink-raised);
	}
}

/* The tabs: the app's segmented control, a pill of the fill gray holding the two; the open one a black pill with white
   text, the other the muted gray in the medium weight. */
html body .lcr-auth .ulz-signin-tabs {
	display: flex;
	justify-content: center;
	margin: 0 0 var(--lcr-space-20);
}

html body .lcr-auth .ulz-signin-tabs ul {
	display: inline-flex;
	gap: var(--lcr-space-4);
	margin: 0;
	padding: var(--lcr-space-4);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
}

html body .lcr-auth .ulz-signin-tabs li {
	margin: 0;
}

html body .lcr-auth .ulz-signin-tabs a,
html body .lcr-auth .ulz-signin-tabs li:hover a {
	height: var(--lcr-size-segment);
	margin: 0;
	padding: 0 var(--lcr-space-18);
	border-radius: var(--lcr-radius-pill);
	background-color: transparent;
	color: var(--lcr-color-muted);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-font-weight-medium);
	line-height: var(--lcr-size-segment);
}

html body .lcr-auth .ulz-signin-tabs li.ulz-active a {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
	font-weight: var(--lcr-type-label-font-weight);
}

@media (hover: hover) {
	html body .lcr-auth .ulz-signin-tabs li:not(.ulz-active):hover a {
		color: var(--lcr-color-ink);
	}
}

/* A step's title: the app's display type, centred, then the app's 20 before the form. */
html body .lcr-auth .ulz-signin-title {
	display: block;
	margin: 0 0 var(--lcr-space-20);
	color: var(--lcr-color-ink);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-display-font-size);
	font-weight: var(--lcr-type-display-font-weight);
	letter-spacing: var(--lcr-type-display-letter-spacing);
	line-height: var(--lcr-type-display-line-height);
	text-align: center;
}

/* Ordinary text of a step (the reset's explanation): the app's body type in the muted gray. */
html body .lcr-auth .ulz-signin-section p:not(.lcr-auth-terms, .lcr-auth-privacy, .lcr-auth-lead, .lcr-auth-divider, .ulz-mb-0) {
	margin: 0 0 var(--lcr-space-16);
	padding: 0;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-body-font-size);
	line-height: var(--lcr-type-body-line-height);
}

/* The fields sit in Utillz's grid; each row keeps the app's 16 under a field. */
html body .lcr-auth .ulz-grid {
	margin: 0;
}

html body .lcr-auth .ulz-grid > .ulz-form-group {
	margin: 0 0 var(--lcr-space-16);
	padding: 0;
}

/* One field to a row at every width, as the app's form (Utillz sets first and last name, and the password and its
   repetition, two to a row from the tablet up). */
html body .lcr-auth .ulz-grid > [class*="ulz-col-"] {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}

/* "Lost your password?": the app's text button, the label's type in ink. */
html body .lcr-auth .ulz-lost-pass-link {
	display: inline-block;
	padding: var(--lcr-space-8) var(--lcr-space-12);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-type-label-font-weight);
	line-height: var(--lcr-type-label-line-height);
}

/* The messages, Core's and the modal's: the app's notices, plain body text in the muted gray, no box. */
html body .lcr-auth :is(.ulz-signin-errors, .ulz-signin-success) {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 var(--lcr-space-16);
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-body-font-size);
	font-weight: var(--lcr-type-body-font-weight);
	line-height: var(--lcr-type-body-line-height);
}

/* The column's top from the desktop up: the modal's 20 above the logo. */
@media (min-width: 1200px) {
	html body .lcr-auth .ulz-modal-container {
		padding-top: var(--lcr-space-20);
	}
}

/* The terms' box: the app's checkbox beside its line. Its tick is the shared `check` icon as a mask, in the box's
   white (design.css): Heilz draws it as a Material Icons glyph, a font the site no longer loads, which showed a box. */
html body .lcr-auth .ulz-checkbox .ulz--toggle::after {
	content: "";
	width: var(--lcr-space-18);
	height: var(--lcr-space-18);
	background-color: currentColor;
	-webkit-mask: url("../icons/check.svg") center / contain no-repeat;
	mask: url("../icons/check.svg") center / contain no-repeat;
	font-size: 0;
}

/* The terms' box: the app's checkbox beside its line. */
html body .lcr-auth .ulz-checkbox .ulz--text {
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-body-font-size);
}

/* The type cards: one above the other at every width, the app's 12 between; they stay above the details once a card is
   chosen. */
html body .lcr-auth .lcr-auth-role {
	margin: 0 0 var(--lcr-space-20);
	text-align: left;
}

html body .lcr-auth .lcr-auth-role ul {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-12);
	list-style: none;
	margin: 0;
	padding: 0;
}

html body .lcr-auth .lcr-auth-role li {
	display: block;
	margin: 0;
}

/* A card: the app's `_AccountTypeCard`, `radius.tile`, 16 inside, the icon's round at the left and the name over the
   sentence beside it. Its border is the `muted` hairline (design.css says why), the chosen one's the ink at twice the
   width on the panel gray, its round the ink with the icon in white (page.js sets `ulz--active`). */
html body .lcr-auth .lcr-auth-role li a {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: var(--lcr-size-avatar-suggestion) minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--lcr-space-16);
	align-items: center;
	padding: var(--lcr-space-16);
	border: var(--lcr-size-hairline) solid var(--lcr-color-muted);
	border-radius: var(--lcr-radius-tile);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
	text-align: left;
	text-decoration: none;
}

html body .lcr-auth .lcr-auth-role li a.ulz--active {
	padding: calc(var(--lcr-space-16) - var(--lcr-size-hairline));
	border: calc(2 * var(--lcr-size-hairline)) solid var(--lcr-color-ink);
	background-color: var(--lcr-color-panel);
}

html body .lcr-auth .lcr-auth-type-mark {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lcr-size-avatar-suggestion);
	height: var(--lcr-size-avatar-suggestion);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
}

html body .lcr-auth .lcr-auth-role li a.ulz--active .lcr-auth-type-mark {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body .lcr-auth .lcr-auth-type-mark .lcr-icon {
	display: block;
	flex: none;
	width: var(--lcr-space-32);
	height: var(--lcr-space-32);
	margin: 0;
}

/* The name, in the app's title type, and the sentence under it in the small type and the muted gray. */
html body .lcr-auth .lcr-auth-role .ulz--name {
	display: block;
	align-self: end;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-title-font-size);
	font-weight: var(--lcr-type-title-font-weight);
	letter-spacing: var(--lcr-type-title-letter-spacing);
	line-height: var(--lcr-type-title-line-height);
}

html body .lcr-auth .lcr-auth-role .ulz--summary {
	display: block;
	align-self: start;
	margin-top: var(--lcr-space-4);
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-small-font-size);
	font-weight: var(--lcr-type-small-font-weight);
	line-height: var(--lcr-type-small-line-height);
}

/* Artist's second sentence, the one-time enrollment (its price is LCR Core's): on its own line, in the summary's colour. */
html body .lcr-auth .lcr-auth-role .lcr-auth-enrollment {
	display: block;
}

/* "Resend code": the app's outlined pill, white with the ink's hairline, the whole column wide. */
html body .lcr-auth .lcr-auth-resend {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-18);
	border: var(--lcr-size-hairline) solid var(--lcr-color-ink);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-type-label-font-weight);
	cursor: pointer;
}

html body .lcr-auth .lcr-auth-resend:disabled {
	cursor: default;
	opacity: .6;
}

/* The fields Core named in its answer (data.fields): the ink's ring, as the app's error. */
html body .lcr-auth .lcr-auth-register input[aria-invalid="true"] + .ulz--toggle {
	box-shadow: 0 0 0 var(--lcr-web-focus-ring) var(--lcr-color-ink);
}

/* A text field's shadow is its rule's `--form-boundary` (layout-fields.css, whose selector outweighs this file's). */
.lcr-auth .lcr-auth-register input[aria-invalid="true"],
.lcr-auth .lcr-auth-reset input[aria-invalid="true"] {
	--form-boundary: 0 0 0 var(--lcr-web-focus-ring) var(--lcr-color-ink);
}

/*
 * The provider buttons (A4; ADR-0021 D6, Q-9; the owner's decision of 2026-10-19, which replaces Q121): the app's
 * `ProviderButton`, white pills of `size.control` with a one-point outline drawn inside (the ink; none visible in the dark mode, `provider-outline`, ADR-0045 D7) and the provider's own official
 * logo, stacked with the app's 20 between them; the terms line under the buttons of the create account; and the "or" that
 * leads to the email fields. The title is Google's light theme's: `color.provider-ink`, 14/20 in a medium weight (Geist
 * Medium, `type.provider-label`), the same on all three. The logos are the providers' artwork, in their own colours, never
 * recoloured: Apple's SVG inline (black), Google's "G" and Facebook's logo as images; `fill`, `color` and `filter` are never
 * set on them. The vendor's flex and padding rules must not shrink them, so each is a flex item that does not shrink
 * (WEB-131 measures them).
 */
html body .lcr-auth .lcr-auth-providers {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-20);
	margin: 0 0 var(--lcr-space-20);
}

html body .lcr-auth .lcr-auth-provider,
html body .lcr-auth .lcr-auth-provider:hover {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--lcr-space-10);
	width: 100%;
	min-height: var(--lcr-size-control);
	margin: 0;
	padding: 0 var(--lcr-space-20);
	border: var(--lcr-size-hairline) solid var(--lcr-color-provider-outline); /* the ink in the light mode, the button's own white (no visible outline) in the dark one, ADR-0045 D7 */
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-provider-surface); /* white in both modes */
	color: var(--lcr-color-provider-ink);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-provider-label-font-size);
	font-weight: var(--lcr-type-provider-label-font-weight);
	line-height: var(--lcr-type-provider-label-line-height);
	text-decoration: none;
	cursor: pointer;
}

html body .lcr-auth .lcr-auth-provider > span {
	margin: 0;
}

/* Google's "G" and Facebook's logo are 20 points high, as Google's own light button draws its "G" at 40; the file's own
   proportion gives the width. */
html body .lcr-auth .lcr-auth-provider-icon {
	display: block;
	flex: none;
	width: auto;
	height: var(--lcr-space-20);
	padding: 0;
	margin: 0;
}

/* Apple's artwork is cut for a button as high as the button and carries its own margin to the button's edge and to the
   title (Apple's rule: match the height of the logo file to the height of the button), so it is as high as the button
   inside its one-point outline (the button is 40 outside, 38 within) with no gap of its own; its box keeps the file's
   proportion, 39 by 44. */
html body .lcr-auth .lcr-auth-provider--apple {
	gap: 0;
}

html body .lcr-auth .lcr-auth-provider--apple .lcr-auth-provider-icon {
	height: calc(var(--lcr-size-control) - 2 * var(--lcr-size-hairline));
	width: auto;
	aspect-ratio: 39 / 44;
}

/* The lead line of the step a provider's callback opens: the app's body type in the muted gray, under its title. */
html body .lcr-auth .lcr-auth-lead {
	margin: 0 0 var(--lcr-space-16);
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-body-font-size);
	line-height: var(--lcr-type-body-line-height);
	text-align: left;
}

html body .lcr-auth .lcr-auth-terms {
	margin: 0;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-small-font-size);
	line-height: var(--lcr-type-small-line-height);
	text-align: center;
}

html body .lcr-auth .lcr-auth-terms a {
	color: inherit;
	text-decoration: underline;
}

/* The privacy line under the terms box (templates/auth/sections.php): information, never accepted; the box's own
   small muted type, at the box's left edge. */
html body .lcr-auth .ulz-signin-section p.lcr-auth-privacy {
	margin: var(--lcr-space-8) 0 0;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-small-font-size);
	line-height: var(--lcr-type-small-line-height);
}

html body .lcr-auth .lcr-auth-privacy a {
	color: inherit;
	text-decoration: underline;
}

/* "or", between two lines of the divider gray, the app's 16 above and below. */
html body .lcr-auth .lcr-auth-divider {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-12);
	margin: var(--lcr-space-16) 0;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-small-font-size);
	line-height: var(--lcr-type-small-line-height);
}

html body .lcr-auth .lcr-auth-divider::before,
html body .lcr-auth .lcr-auth-divider::after {
	content: "";
	flex: 1;
	border-top: var(--lcr-size-hairline) solid var(--lcr-color-divider);
}

html body .lcr-auth .lcr-auth-divider > span {
	margin: 0;
}

/* The type step's cards, after a provider's callback, sit where the picker's do, and the terms line under them. */
html body .lcr-auth .lcr-auth-role .lcr-auth-terms {
	margin-top: var(--lcr-space-16);
}

/* The steps, buttons and footers follow the `hidden` attribute page.js and the server set, over the vendors' display
   rules (Utillz's `.ulz-button`, the title's `display: block` above): last, at the weight of the rules it answers. */
html body .lcr-auth [hidden] {
	display: none;
}