/*
 * The doors of the shop account page, wearing the brand.
 *
 * Somebody signing in to a site we deliver meets two doors, and they used to look nothing alike:
 * wp-login.php is repainted by the plugin, while the account page of the shop was left to the
 * theme, which draws a generic form under a generic button. The same person meets both on the
 * same day, and the second one is where the address printed on a card lands.
 *
 * It repaints and never rebuilds. No template of the shop is replaced, no markup is printed, and
 * the sheet only ever loads while the visitor is signed out, which is the only state where this
 * page carries a form to sign in, to ask for a new password or to choose one. Signed in, the page
 * is the account itself and belongs to the shop.
 *
 * It reads the tokens, which bring the faces with them, and nothing else. Bootstrap is not
 * loaded: this page belongs to the theme of the site, and a grid landing on top of it would move
 * every element the sheet did not mean to touch.
 */

body.ssf-account-auth {
	/*
	 * How far the block is pushed clear of the top of the viewport.
	 *
	 * A theme is free to fix its header there, and a fixed header takes no room in the flow: the
	 * heading of the form and the top of the card end up behind it, which is what somebody meets
	 * before they can read what the page asks of them. That height belongs to the theme and
	 * cannot be read from a sheet, so the block keeps a clearance of its own, wider than the
	 * headers of the themes we deliver. A site that needs another value redeclares this name.
	 */
	--ssf-account-clearance: 9.5rem;

	/* The card and the heading share one axis, so the width is written once and read three times. */
	--ssf-account-width: 26rem;
}

/*
 * On a telephone the clearance above becomes a quarter of the screen of nothing at all before the
 * first readable line. The reason for it holds there, a theme may still fix its header, but a
 * fixed header on a narrow screen is a short one. A site that needs another value redeclares the
 * name, on this query as well as on the one above.
 */
@media (max-width: 767.98px) {
	body.ssf-account-auth {
		--ssf-account-clearance: 4.5rem;
	}
}

body.ssf-account-auth .woocommerce {
	/*
	 * One column, whatever the theme lays this wrapper out as. A theme that draws the account of
	 * a signed in holder as a rail beside a panel sets a row here, and a door has neither: the
	 * heading landed to the left of the card, at arm's length from the fields it names, and a
	 * gap of the theme opened between the two. Written rather than inherited, so the door reads
	 * the same on a site whose theme sets nothing at all.
	 */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding-block: var(--ssf-account-clearance) calc(var(--ssf-space-8) + env(safe-area-inset-bottom, 0px));
	font-family: var(--ssf-font-body);
	color: var(--ssf-text);
}

/*
 * The mark, painted by the sheet rather than printed into the page.
 *
 * The same lockup as the login screen of WordPress, so the doors of one site are read as doors of
 * one house. Hung on the wrapper and not on the heading, because the view that asks for a new
 * password carries no heading at all: a mark that lived on a heading would be missing from
 * exactly the door somebody reaches from an email.
 *
 * It is a wide drawing, so the box follows its ratio instead of being a square with the drawing
 * lost inside it, and contain is what keeps it undistorted when the card narrows on a telephone.
 * The width is capped rather than fixed: a mark wider than the card it sits above reads as a
 * mistake. It carries no link of its own, the header of the site being right above it.
 */
body.ssf-account-auth .woocommerce::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: min(260px, 100%);
	aspect-ratio: 1036 / 320;
	margin-block-end: var(--ssf-space-5);
	background-image: url("../img/soklae-login.svg");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

/*
 * The heading of the view, above the card and on the same axis. Centred rather than left aligned:
 * the card it names is centred, and a heading off to one side of it reads as a heading of the
 * page rather than of the form.
 */
body.ssf-account-auth .woocommerce > h2 {
	/*
	 * Shown again. The themes we deliver hide it, which costs nothing on the account of a signed
	 * in holder, whose panels name themselves. On a door it is the only line that says what the
	 * page is asking, and without it somebody meets two fields and a button under a header that
	 * belongs to a salon.
	 */
	display: block;
	width: 100%;
	max-width: var(--ssf-account-width);
	margin-inline: auto;
	margin-block-end: var(--ssf-space-4);
	font-family: var(--ssf-font-display);
	font-size: var(--ssf-size-h2);
	line-height: var(--ssf-leading-h2);
	color: var(--ssf-text);
	text-align: center;
}

/*
 * The form is a card and has to keep reading as one, in the same shape as the card of the login
 * screen: white on the page, the brand as a rule around it, the same radius and the same veil of
 * a shadow. The rule is what carries the boundary, since a white card on a near white page has
 * none of its own.
 */
body.ssf-account-auth form.woocommerce-form-login,
body.ssf-account-auth form.woocommerce-ResetPassword {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ssf-account-width);
	margin-inline: auto;
	padding: var(--ssf-space-5);
	background: var(--ssf-surface);
	border: 1px solid var(--ssf-primary);
	border-radius: var(--ssf-radius);
	box-shadow: 0 1px 3px var(--ssf-primary-wash);
}

body.ssf-account-auth form.woocommerce-form-login label,
body.ssf-account-auth form.woocommerce-ResetPassword label,
body.ssf-account-auth form.woocommerce-form-login p,
body.ssf-account-auth form.woocommerce-ResetPassword p {
	font-family: var(--ssf-font-body);
	font-size: var(--ssf-size-small);
	color: var(--ssf-text);
}

/* The mark that says a field is owed. Its own bounded tone, never the fill of an alert. */
body.ssf-account-auth .woocommerce .required {
	color: var(--ssf-error-text);
	text-decoration: none;
}

body.ssf-account-auth form.woocommerce-form-login input[type="text"],
body.ssf-account-auth form.woocommerce-form-login input[type="email"],
body.ssf-account-auth form.woocommerce-form-login input[type="password"],
body.ssf-account-auth form.woocommerce-ResetPassword input[type="text"],
body.ssf-account-auth form.woocommerce-ResetPassword input[type="email"],
body.ssf-account-auth form.woocommerce-ResetPassword input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	background: var(--ssf-surface);
	border: 1px solid var(--ssf-border-strong);
	border-radius: var(--ssf-radius-sm);
	padding: var(--ssf-space-2) var(--ssf-space-3);
	font-family: var(--ssf-font-body);
	/* Never under sixteen pixels: below that, Safari on iOS zooms the page at the moment the
	   field takes the focus and never zooms back out. The maximum keeps a larger system size. */
	font-size: max(16px, var(--ssf-size-body));
	color: var(--ssf-text);
}

body.ssf-account-auth form.woocommerce-form-login input[type="text"]:focus,
body.ssf-account-auth form.woocommerce-form-login input[type="email"]:focus,
body.ssf-account-auth form.woocommerce-form-login input[type="password"]:focus,
body.ssf-account-auth form.woocommerce-ResetPassword input[type="text"]:focus,
body.ssf-account-auth form.woocommerce-ResetPassword input[type="email"]:focus,
body.ssf-account-auth form.woocommerce-ResetPassword input[type="password"]:focus {
	border-color: var(--ssf-primary);
	box-shadow: 0 0 0 1px var(--ssf-primary);
	outline: 2px solid transparent;
}

body.ssf-account-auth .woocommerce input[type="checkbox"] {
	accent-color: var(--ssf-primary);
}

/*
 * The submit button. The brand green carries the ivory of the palette rather than the blue the
 * theme hands out to every button of the site, and the pressed state falls to the declared deep
 * green instead of a computed filter.
 *
 * The case is set back to none: a theme that capitalises every word of a label turns one sentence
 * into another one, and the same door on the other side reads it as it was written.
 */
body.ssf-account-auth .woocommerce button[type="submit"],
body.ssf-account-auth .woocommerce .woocommerce-button,
body.ssf-account-auth .woocommerce .woocommerce-Button {
	background: var(--ssf-primary);
	border: 1px solid var(--ssf-primary);
	border-radius: var(--ssf-radius-sm);
	padding: var(--ssf-space-2) var(--ssf-space-5);
	min-height: var(--ssf-tap);
	color: var(--ssf-on-primary);
	font-family: var(--ssf-font-body);
	font-size: var(--ssf-size-small);
	font-weight: 600;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	transition: background var(--ssf-transition);
}

body.ssf-account-auth .woocommerce button[type="submit"]:hover,
body.ssf-account-auth .woocommerce button[type="submit"]:focus,
body.ssf-account-auth .woocommerce .woocommerce-button:hover,
body.ssf-account-auth .woocommerce .woocommerce-button:focus,
body.ssf-account-auth .woocommerce .woocommerce-Button:hover,
body.ssf-account-auth .woocommerce .woocommerce-Button:focus {
	background: var(--ssf-primary-strong);
	border-color: var(--ssf-primary-strong);
	color: var(--ssf-on-primary);
}

body.ssf-account-auth .woocommerce button[type="submit"]:focus-visible,
body.ssf-account-auth .woocommerce .woocommerce-button:focus-visible,
body.ssf-account-auth .woocommerce .woocommerce-Button:focus-visible {
	outline: 2px solid var(--ssf-primary-strong);
	outline-offset: 2px;
}

/* The control that reveals the password, inside the field, on the most exposed of the three views. */
body.ssf-account-auth .woocommerce .show-password-input,
body.ssf-account-auth .woocommerce .show-password-input::after {
	color: var(--ssf-brand-text);
}

body.ssf-account-auth .woocommerce .show-password-input:focus-visible {
	outline: 2px solid var(--ssf-primary);
	outline-offset: 0;
	box-shadow: none;
}

body.ssf-account-auth .woocommerce-LostPassword a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ssf-tap);
	color: var(--ssf-brand-text);
}

body.ssf-account-auth .woocommerce-LostPassword a:hover,
body.ssf-account-auth .woocommerce-LostPassword a:focus {
	color: var(--ssf-primary-strong);
}

/*
 * The three notices of the shop, on the axis of the card so they read as belonging to it.
 *
 * A refusal keeps TWO channels and both are measured. The rule goes right round rather than
 * along one edge, and the tint stays as the second, softer signal rather than the only one: a
 * light fill on a near white page lands close to one to one and identifies nothing at all.
 */
body.ssf-account-auth .woocommerce-error,
body.ssf-account-auth .woocommerce-message,
body.ssf-account-auth .woocommerce-info {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ssf-account-width);
	margin-inline: auto;
	margin-block-end: var(--ssf-space-4);
	border-radius: var(--ssf-radius-sm);
	font-family: var(--ssf-font-body);
	font-size: var(--ssf-size-small);
	color: var(--ssf-text);
}

body.ssf-account-auth .woocommerce-error {
	border: 1px solid var(--ssf-error);
	border-left-width: 4px;
	background: rgba(var(--ssf-error-rgb), 0.10);
}

body.ssf-account-auth .woocommerce-message {
	border: 1px solid var(--ssf-success);
	border-left-width: 4px;
	background: rgba(var(--ssf-success-rgb), 0.10);
}

body.ssf-account-auth .woocommerce-info {
	border: 1px solid var(--ssf-border-strong);
	border-left-width: 4px;
	background: var(--ssf-surface-alt);
}