/*
 * 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
 * that block 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.
 *
 * THE SECOND BLOCK IS THE OTHER WAY ROUND, and it is at the foot of this file. It dresses a card
 * the plugin itself prints on the dashboard of a signed in holder, on the commercial site. The
 * two blocks share a file and nothing else: each is anchored on a class of its own, so neither
 * can reach the screens of the other.
 *
 * 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 button the shop switches off while a new password is under the strength it requires.
 * The shop only sets the attribute and a class, and the rules above keep the brand fill and
 * even darken it under the pointer: a click then does nothing and nothing says why. Switched
 * off, it reads as switched off, and the pointer changes nothing.
 */
body.ssf-account-auth .woocommerce button[type="submit"]:disabled,
body.ssf-account-auth .woocommerce button[type="submit"]:disabled:hover,
body.ssf-account-auth .woocommerce button[type="submit"]:disabled:focus,
body.ssf-account-auth .woocommerce button[type="submit"].disabled,
body.ssf-account-auth .woocommerce button[type="submit"].disabled:hover,
body.ssf-account-auth .woocommerce button[type="submit"].disabled:focus,
body.ssf-account-auth .woocommerce .woocommerce-button:disabled,
body.ssf-account-auth .woocommerce .woocommerce-button:disabled:hover,
body.ssf-account-auth .woocommerce .woocommerce-button:disabled:focus,
body.ssf-account-auth .woocommerce .woocommerce-button.disabled,
body.ssf-account-auth .woocommerce .woocommerce-button.disabled:hover,
body.ssf-account-auth .woocommerce .woocommerce-button.disabled:focus,
body.ssf-account-auth .woocommerce .woocommerce-Button:disabled,
body.ssf-account-auth .woocommerce .woocommerce-Button:disabled:hover,
body.ssf-account-auth .woocommerce .woocommerce-Button:disabled:focus,
body.ssf-account-auth .woocommerce .woocommerce-Button.disabled,
body.ssf-account-auth .woocommerce .woocommerce-Button.disabled:hover,
body.ssf-account-auth .woocommerce .woocommerce-Button.disabled:focus {
	background: var(--ssf-surface-alt);
	border-color: var(--ssf-border-strong);
	color: var(--ssf-text-muted);
	cursor: not-allowed;
}

/* 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 verdict the shop writes under a new password. Left to the theme it is one more grey
 * line, while it is the only reason the button does not answer: it reads as the notices
 * below do, a rule right round and a tint, in the error tone while the password is refused
 * (short, bad) and in the success tone once the required strength is reached (good, strong).
 */
body.ssf-account-auth .woocommerce .woocommerce-password-strength {
	box-sizing: border-box;
	margin-block: var(--ssf-space-2);
	padding: var(--ssf-space-2) var(--ssf-space-3);
	border: 1px solid var(--ssf-error);
	border-left-width: 4px;
	border-radius: var(--ssf-radius-sm);
	background: rgba(var(--ssf-error-rgb), 0.10);
	font-family: var(--ssf-font-body);
	font-size: var(--ssf-size-small);
	font-weight: 600;
	color: var(--ssf-error-text);
}

body.ssf-account-auth .woocommerce .woocommerce-password-strength.good,
body.ssf-account-auth .woocommerce .woocommerce-password-strength.strong {
	border-color: var(--ssf-success);
	background: rgba(var(--ssf-success-rgb), 0.10);
	color: var(--ssf-success-text);
}

/* The shop fills the box only once a key is typed, and an empty one would frame nothing. */
body.ssf-account-auth .woocommerce .woocommerce-password-strength:empty {
	display: none;
}

/*
 * The advice added while the password is refused is plain text of the card. A theme may draw
 * it as an information notice with an icon of its own, which then competes with the verdict
 * right above it for the same glance.
 */
body.ssf-account-auth .woocommerce small.woocommerce-password-hint {
	display: block;
	margin-block: 0 var(--ssf-space-3);
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--ssf-font-body);
	font-size: var(--ssf-size-small);
	font-weight: 400;
	color: var(--ssf-text);
}

body.ssf-account-auth .woocommerce small.woocommerce-password-hint::before {
	content: none;
}

/*
 * 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);
}

/*
 * THE CARD OF THE SITES, on the dashboard of the account page.
 *
 * It is the door that was missing: somebody who has paid for a site and opens their account here
 * had no way through to the surface where the words, the pictures and the subscription of that
 * site answer. The card names what was bought and offers the way in.
 *
 * IT DECLARES NO TYPEFACE AND NO TYPE SIZE FOR ITS HEADING, and that is deliberate rather than
 * unfinished. The paragraphs around it are drawn by the theme of the shop, and a card setting a
 * face of its own would read as a foreign object pasted onto the page. The buttons carry the
 * classes of the shop for the same reason: what dresses them is whatever dresses every other
 * button of that account, and the rules below only ever give them a touch target and a width.
 *
 * The surface and the tone are named all the same. A box that sets a background has to set the
 * colour of the text standing on it, or it inherits a tone bounded against a surface it no longer
 * has.
 */
.ssf-account-card {
	box-sizing: border-box;
	margin-block: var(--ssf-space-5);
	padding: var(--ssf-space-4);
	background: var(--ssf-surface-alt);
	border: 1px solid var(--ssf-border);
	border-radius: var(--ssf-radius);
	color: var(--ssf-text);
}

.ssf-account-card-title {
	margin-block: 0 var(--ssf-space-3);
}

/*
 * One site per block, parted by a rule rather than by a gap alone: a holder with two sites reads
 * two addresses and two states, and space on its own does not say which fact belongs to which.
 * The rule is a separator and not the outline of a control, so it stands at the softer tone.
 */
.ssf-account-site + .ssf-account-site {
	margin-block-start: var(--ssf-space-4);
	padding-block-start: var(--ssf-space-4);
	border-block-start: 1px solid var(--ssf-border);
}

.ssf-account-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ssf-space-3);
	margin-block: 0 var(--ssf-space-4);
}

.ssf-account-fact dt {
	margin-block-end: var(--ssf-space-1);
	font-size: var(--ssf-size-small);
	color: var(--ssf-text-muted);
}

.ssf-account-fact dd {
	margin: 0;
	font-size: var(--ssf-size-body);
	line-height: var(--ssf-leading-body);
	/* The address of a site is one word with no space in it, and it is the longest thing here. */
	overflow-wrap: anywhere;
}

.ssf-account-acts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ssf-space-3);
	margin-block: 0;
}

/*
 * The touch target, and nothing else. Read from the one token that carries it: the literal it
 * holds is declared once for the whole plugin and never repeated on a rule of a component.
 */
.ssf-account-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ssf-tap);
}

/*
 * Three facts side by side need three columns of readable width, which a telephone does not have:
 * the state of a site then wraps onto four lines beside a plan that wraps onto two.
 */
@media (max-width: 767.98px) {
	.ssf-account-facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * On the narrowest screens the two gestures stack and each takes the full width. Side by side
 * they fall under the touch target as soon as a label is translated into a longer language.
 */
@media (max-width: 575.98px) {
	.ssf-account-acts {
		flex-direction: column;
		align-items: stretch;
	}

	.ssf-account-act {
		width: 100%;
	}
}