/**
 * Avista Care — wp-login screen.
 *
 * Loaded on the login screen only, via login_enqueue_scripts; see
 * includes/Login.php for why that hook and why it is outside Plugin's
 * is_admin() guard.
 *
 * Every rule is scoped to `body.acd-login`. Core's login.css is shared with
 * the lost-password, reset-password and register screens, and this was written
 * and checked against the sign-in form — the class is what stops a rule here
 * reaching a screen nobody looked at.
 *
 * ## What is being overridden
 *
 * Read out of the real wp-admin/css/login.css rather than from memory, because
 * the values are surprising:
 *
 *   #login             width: 320px            a 320px column
 *   .login form        padding: 26px 24px      1px #c3c4c7 border, 1px shadow
 *   .login form .input font-size: 24px         which is why fields look huge
 *   .login h1 a        background-image: …     the WordPress mark, 84x84
 *   .login #nav        after the form          outside the card, not in it
 *
 * Most are plain two-class selectors. This sheet loads after core's, so equal
 * specificity wins on order and the overrides can stay readable instead of
 * escalating. Where core is id-qualified, so is the override.
 *
 * ## Tokens
 *
 * The same --acd-* set as the dashboard, declared here rather than imported:
 * dashboard.css scopes its :root block to a list of widget ids that do not
 * exist on this screen, so nothing would resolve. Values are copied, and the
 * comment beside each names the design-system token it came from so the two
 * can be diffed.
 */

body.acd-login {
	/* tokens/color.css — same values as assets/css/dashboard.css */
	--acd-brand: #3858e9;          /* --indigo-600 */
	--acd-brand-hover: #2f4bd0;    /* --indigo-700 */
	--acd-brand-subtle: #eef1fe;   /* --indigo-50  */
	--acd-text-heading: #1d2327;   /* --text-heading */
	--acd-text-body: #2c3338;      /* --text-body  */
	--acd-text-muted: #50575e;     /* --text-muted */
	--acd-text-subtle: #787c82;    /* --text-subtle */
	--acd-surface-card: #ffffff;   /* --surface-card */
	--acd-surface-page: #f0f0f1;   /* wp-admin's own login background */
	--acd-border-subtle: #e4e5e7;  /* --border-subtle */
	--acd-grey-300: #d5d7da;
	--acd-grey-400: #c3c4c7;
	/* The mark's fill (David, 2026-09-01). Not from the dashboard's --acd-*
	   scale: this is --neutral-200 from the Avista corporate token set, the
	   only place on this screen that reaches outside the admin palette. Named
	   rather than inlined so the next person can see it is a chosen brand
	   value and not a grey someone picked. */
	--acd-mark: #aebacb;           /* Avista --neutral-200 */
	/* tokens/radius.css */
	--acd-radius-sm: 4px;          /* --radius-sm   */
	--acd-radius-card: 10px;       /* --radius-card */
	/* tokens/elevation.css */
	--acd-shadow-card: 0 1px 2px rgb(29 35 39 / 0.06), 0 0 0 1px rgb(29 35 39 / 0.04);
	/* tokens/motion.css */
	--acd-dur-fast: 120ms;
	--acd-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

	--acd-font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	/* No mono token in the dashboard set — the host line is the only monospaced
	   text on this screen, so it carries a system stack rather than pulling a
	   webfont onto the login page for one string. */
	--acd-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

	background: var(--acd-surface-page);
	font-family: var(--acd-font-sans);

	/* Centred in the viewport rather than sitting near the top. A column flex
	   body plus `margin: auto` on #login below — deliberately NOT
	   `justify-content: center`, which centres correctly but makes the top of
	   an over-tall item unreachable: once the form plus an error notice is
	   taller than the window, the overflow goes off both ends and no amount of
	   scrolling gets the first field back. Auto margins collapse to zero
	   instead, so a tall form falls back to top-aligned and scrolls. */
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* --- the column -----------------------------------------------------------
   Core's 320px is too narrow for a two-line label row, and the whole screen
   reads as a cramped strip because of it. Widened, and capped so it does not
   sprawl on a desktop. Core's `padding: 5% 0 0` goes with it: a percentage top
   pad moved the card as the window resized, which is what made the form sit
   differently on every screen — and it fights the centring above.

   `margin: auto` is what centres, on both axes; see the body rule for why not
   justify-content. The padding is symmetric so the centring is true, and keeps
   the card off the edges on a short window. */
body.acd-login #login {
	width: 100%;
	max-width: 480px;
	padding: 24px 20px;
	box-sizing: border-box;
	margin: auto;
}

/* --- the mark ------------------------------------------------------------
   Core paints the WordPress logo as a background-image on the anchor and sizes
   the anchor to 84x84. Replaced with the Avista monogram — the "A" alone, from
   02 Avista Assets/Logo/avista_logo_mark.svg, which is what the prototype
   shows. The wordmark this first used is still in the repo and still used by
   Updater and WhitelabelPolicy; it is only the login screen that takes the
   monogram. */
body.acd-login h1 {
	margin: 0;
}
body.acd-login h1 a {
	/* The monogram, not the wordmark: 200x207 in its own viewBox, so the box
	   below keeps that ratio rather than squashing it. The wordmark stays in
	   the repo — Updater and WhitelabelPolicy both use it. */
	width: 56px;
	height: 58px;
	/* Drawn as a mask rather than a background-image so the mark takes a token
	   colour. This file hardcodes `fill="#111F35"`, and an SVG loaded through
	   background-image cannot be recoloured by any CSS on the page. Masking
	   uses the shape's alpha and paints it with background-color, which is how
	   the mark reads as a quiet brand mark rather than the heaviest thing on
	   the screen — and why swapping the wordmark for this file needed no other
	   change. */
	background-image: none;
	background-color: var(--acd-mark);
	-webkit-mask-image: url("../img/avista-logo-mark.svg");
	mask-image: url("../img/avista-logo-mark.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/* Core sets a 20px bottom margin; the subtitle below supplies the gap. */
	margin: 0 auto 10px;
	/* Core hides the text with text-indent: -9999px, which stays — the anchor's
	   text is the site title and is the link's accessible name. */
}

/* --- "Sign in to <host>" -------------------------------------------------
   Printed by Login::subtitle() through the login_message filter, which lands
   between the mark and the form. Core styles .login .message as a white box
   with a left border — that is the notice treatment, and this is not a notice,
   so it is reset rather than inherited. */
body.acd-login .acd-login__subtitle {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--acd-text-muted);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
body.acd-login .acd-login__host {
	font-family: var(--acd-font-mono);
	font-size: 13px;
	color: var(--acd-text-body);
	/* The domain is an identifier: it must not break across lines mid-name.
	   Icelandic domains get long — vefþjónusta.example.is — and a wrapped
	   host reads as two different sites. */
	white-space: nowrap;
}

/* --- the card ------------------------------------------------------------ */
body.acd-login form {
	margin: 0;
	padding: 28px 28px 24px;
	border: 1px solid var(--acd-border-subtle);
	border-radius: var(--acd-radius-card);
	background: var(--acd-surface-card);
	box-shadow: var(--acd-shadow-card);
	/* Core sets `overflow: hidden` here, and it is doing real work: it makes
	   the card a block formatting context so that the two floats inside it —
	   `.forgetmenot` left and `.button-primary` right — are contained by its
	   height. Both floats are cleared below, so the BFC is no longer needed,
	   and dropping it stops the card clipping the focus ring on the first and
	   last fields.

	   Both. Clearing only .forgetmenot and relying on this is what put the
	   submit button hanging out through the bottom border, with #nav wrapping
	   around the float beside it. */
	overflow: visible;
}

/* --- labels and fields --------------------------------------------------- */
body.acd-login form label {
	display: block;
	margin-bottom: 6px;
	color: var(--acd-text-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

body.acd-login form .input,
body.acd-login input[type="text"],
body.acd-login input[type="password"] {
	/* Core's 24px font size is the single biggest reason the default screen
	   looks unlike the rest of wp-admin. */
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0 0 20px;
	padding: 10px 12px;
	border: 1px solid var(--acd-grey-400);
	border-radius: var(--acd-radius-sm);
	background: var(--acd-surface-card);
	color: var(--acd-text-body);
	font-family: var(--acd-font-sans);
	font-size: 16px;
	line-height: 1.5;
	transition:
		border-color var(--acd-dur-fast) var(--acd-ease-standard),
		box-shadow var(--acd-dur-fast) var(--acd-ease-standard);
}
body.acd-login form .input:focus,
body.acd-login input[type="text"]:focus,
body.acd-login input[type="password"]:focus {
	border-color: var(--acd-brand);
	/* One ring, drawn with box-shadow so it follows the 4px radius. Core's
	   default is a 1px shadow plus an outline, which double-draws. */
	box-shadow: 0 0 0 1px var(--acd-brand);
	outline: 2px solid transparent;
	outline-offset: 0;
}
body.acd-login form .input::placeholder {
	color: var(--acd-text-subtle);
}

/* The password field and its show/hide button share a row. Core positions the
   button absolutely inside .wp-pwd, which stays — only the metrics change, so
   the button lines up with a 44px field instead of core's taller one. */
body.acd-login .user-pass-wrap {
	margin: 0;
}
body.acd-login .wp-pwd {
	position: relative;
}
body.acd-login .wp-pwd .input {
	/* Room for the eye, so a long password does not run under it. */
	padding-right: 44px;
}
body.acd-login .wp-pwd .button.wp-hide-pw {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--acd-text-muted);
}
body.acd-login .wp-pwd .button.wp-hide-pw:hover {
	color: var(--acd-text-heading);
}
body.acd-login .wp-pwd .button.wp-hide-pw .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
}

/* --- remember me --------------------------------------------------------
   Core floats this left so the submit button can sit beside it. On its own
   line the float only makes the card's height depend on an overflow hack, so
   it is dropped in favour of a flex row that the WP 7.1 tooltip button joins
   without extra rules. */
body.acd-login #loginform .forgetmenot {
	display: flex;
	align-items: center;
	gap: 8px;
	float: none;
	/* More air below this than the 20px between fields: the gap is what
	   separates the form's last input from the action that submits it, and at
	   20px the button read as part of the checkbox row.

	   Id-qualified, and that is the whole reason this works. `.forgetmenot` is
	   a <p>, and core has `#login form p { margin-bottom: 0 }` at (1,0,2) — an
	   id beats any number of classes, so the class-only selector this rule used
	   to carry lost silently and the margin measured 0. The fields above are
	   unaffected because they are inputs, not paragraphs. */
	margin: 0 0 28px;
	font-size: 14px;
}
body.acd-login #loginform .forgetmenot label {
	margin: 0;
	color: var(--acd-text-body);
	font-weight: 400;
	line-height: 1.4;
}
body.acd-login #loginform .forgetmenot input[type="checkbox"] {
	flex: none;
	margin: 0;
}
/* WordPress 7.1 ships this tooltip beside the checkbox — it is core's, not
   ours, and only needs to stop adding a stray baseline gap in the flex row. */
body.acd-login #loginform .forgetmenot .wp-tooltip__toggle {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

/* --- submit ------------------------------------------------------------- */
body.acd-login form p.submit,
body.acd-login #loginform p.submit {
	/* Core pulls this up 10px to sit level with the floated remember-me. With
	   the float gone that negative margin only crowds the button. */
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
}
body.acd-login #wp-submit {
	/* Core floats every .button-primary on this screen to the right, so the
	   submit could sit beside the floated remember-me. Full width instead, and
	   the float has to be cleared explicitly — display: flex does not do it. */
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--acd-brand);
	border-radius: var(--acd-radius-sm);
	background: var(--acd-brand);
	color: #fff;
	font-family: var(--acd-font-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-shadow: none;
	box-shadow: none;
	/* An <input type="submit"> centres its own value in surplus height, unlike
	   the <a class="button"> that needed flex-centring in the detail panels —
	   but the flex is stated anyway so the two agree, and so an icon could be
	   added later without the label jumping. */
	transition:
		background-color var(--acd-dur-fast) var(--acd-ease-standard),
		border-color var(--acd-dur-fast) var(--acd-ease-standard);
}
body.acd-login #wp-submit:hover,
body.acd-login #wp-submit:focus {
	border-color: var(--acd-brand-hover);
	background: var(--acd-brand-hover);
	color: #fff;
}
body.acd-login #wp-submit:focus-visible {
	outline: 2px solid var(--acd-text-heading);
	outline-offset: 2px;
}

/* --- the links below the card --------------------------------------------
   #nav carries "Lost your password?" and #backtoblog the "Back to <site>"
   link. Both are core's, both sit outside the card, and both stay there: the
   prototype puts the password link inside the card on the Password label's
   line, which needs the markup moved rather than restyled, and that is a
   behaviour change rather than styling. Left for a follow-up. */
body.acd-login #nav,
body.acd-login #backtoblog {
	padding: 0;
	font-size: 13px;
	text-align: center;
}
body.acd-login #nav {
	margin: 16px 0 0;
}
body.acd-login #backtoblog {
	margin: 10px 0 0;
}
body.acd-login #nav a,
body.acd-login #backtoblog a {
	color: var(--acd-text-muted);
	text-decoration: none;
}
body.acd-login #nav a:hover,
body.acd-login #backtoblog a:hover,
body.acd-login #nav a:focus,
body.acd-login #backtoblog a:focus {
	color: var(--acd-brand);
	text-decoration: underline;
}

/* The language switcher core adds below the card. Hidden (David, 2026-09-01):
   it is a second form under the sign-in form, with its own select and its own
   submit button, and it drew more attention than the thing the screen is for.

   `display: none` rather than a visual hide, deliberately — this is a control,
   and leaving it reachable by keyboard while invisible is worse than removing
   it. It changes the locale of the login screen only, so nothing about signing
   in depends on it. A site that needs it back deletes this rule.

   Note the selector: core wraps it in `.language-switcher`, and the <form>
   inside would otherwise pick up the card styling above. */
body.acd-login .language-switcher {
	display: none;
}

/* --- errors and notices -------------------------------------------------
   Core draws these as a white box with a 4px coloured left border. The rest of
   this plugin does not use left-accent borders, so they are re-drawn as the
   same card as the form with a tinted edge. */
body.acd-login #login_error,
body.acd-login .message,
body.acd-login .success {
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--acd-border-subtle);
	border-left-width: 1px;
	border-radius: var(--acd-radius-sm);
	background: var(--acd-surface-card);
	box-shadow: var(--acd-shadow-card);
	color: var(--acd-text-body);
	font-size: 14px;
	line-height: 1.5;
}
body.acd-login #login_error {
	border-color: #f0c8c8;
	background: #fdf3f3;
}

/* --- narrow ------------------------------------------------------------- */
@media screen and (max-width: 520px) {
	body.acd-login #login {
		padding: 24px 16px;
	}
	body.acd-login form {
		padding: 20px 18px 18px;
	}
}

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.acd-login form .input,
	body.acd-login input[type="text"],
	body.acd-login input[type="password"],
	body.acd-login #wp-submit {
		transition: none;
	}
}