/**
 * Custom Login Screen.
 *
 * Every rule is scoped under `.spark-login`, the body class the snippet adds,
 * so nothing here can reach a login page where the pill is switched off.
 *
 * The custom properties are NOT declared here: they come from the stored
 * settings and are appended by wp_add_inline_style(), together with the media
 * query — a media query cannot read a custom property, so a configurable
 * breakpoint has to be interpolated by PHP. The fallbacks in the var() calls
 * below are the shipped defaults, and exist so the layout still holds if that
 * inline block is ever missing.
 *
 * This file loads AFTER wp-admin/css/login.css (declared as a dependency), so
 * the overrides below win on load order at equal specificity. Where a stock
 * rule is more specific, the selector here matches it — that is why several
 * rules carry `.login` as well as `.spark-login`.
 *
 * @package Spark_Utils
 * @subpackage Spark_Utils/includes/snippets/general/custom-login-screen
 */

/* -------------------------------------------------------------- 1. The shell */

body.login.spark-login {
	background: var( --spark-login-page-bg, #e9e9ed );
	color: var( --spark-login-text, #1b1b21 );
	margin: 0;
	min-height: 100vh;
	padding: 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.spark-login-shell {
	display: flex;
	width: 100%;
	max-width: 1280px;
	/* min() rather than a flat height: on a short laptop screen the shell
	   must not grow taller than the viewport and push the button out of
	   reach, and on a tall one an 80px-high card would look broken. */
	min-height: min( 700px, calc( 100vh - 48px ) );
	background: var( --spark-login-form-bg, #ffffff );
	border-radius: calc( var( --spark-login-radius, 14px ) + 6px );
	overflow: hidden;
	box-shadow: 0 24px 64px rgba( 12, 14, 32, 0.13 ), 0 2px 8px rgba( 12, 14, 32, 0.05 );
}

.spark-login-shell__form {
	flex: 1 1 auto;
	min-width: 0;
	/* An explicit order, not the default 0: the panel below has to be able to
	   sort BEFORE this column, and two items both left at 0 fall back to source
	   order — which would silently keep the panel on the right whatever the
	   setting said. */
	order: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 40px;
}

/* The panel is painted on whichever side the settings ask for. `order` moves
   it visually without moving it in the source, so the form still comes first
   for a screen reader and for the tab sequence either way. */
.spark-login-panel {
	flex: 0 0 var( --spark-login-panel-width, 50% );
	position: relative;
	overflow: hidden;
	background: var( --spark-login-panel-bg, #0b1030 );
	color: #ffffff;
	display: flex;
	align-items: center;
	order: 2;
}

.spark-login--panel-left .spark-login-panel {
	order: 0;
}

/* With no panel there is nothing for a 1280px-wide card to hold: the shell
   collapses to a form-sized box that sits in the middle of the page, rather
   than a full-width slab with a 400px column stranded in the centre of it. */
.spark-login--panel-none .spark-login-shell {
	max-width: 520px;
	min-height: 0;
}

.spark-login--panel-none .spark-login-shell__form {
	padding: 56px 48px;
}

/* ----------------------------------------------------- 2. WordPress's #login */

.spark-login #login {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	padding: 0;
}

/* The stock card: white box, hairline border, drop shadow. The shell is the
   card now, so the form inside it has to stop being one. */
.spark-login.login form {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	overflow: visible;
}

/* ------------------------------------------------------------------ 3. Logo */

.spark-login.login h1 {
	text-align: left;
}

/* With no logo uploaded, WordPress's own rule hides this anchor's text off
   screen and paints the WordPress mark behind it. Undo both: the text is the
   site name (see the login_headertext filter) and it is what a client should
   see before they have uploaded anything of their own. When a logo IS set,
   the inline block re-applies the background image and the indent. */
.spark-login.login h1 a {
	background-image: none;
	width: auto;
	height: auto;
	margin: 0 0 32px;
	text-indent: 0;
	overflow: visible;
	display: inline-block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var( --spark-login-text, #1b1b21 );
}

.spark-login.login h1 a:hover,
.spark-login.login h1 a:focus {
	color: var( --spark-login-accent, #4f39f6 );
	box-shadow: none;
}

.spark-login--has-logo.login h1 a {
	margin-bottom: 36px;
}

/* ----------------------------------------------------------- 4. Form fields */

.spark-login.login label {
	display: block;
	color: var( --spark-login-text, #1b1b21 );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 8px;
}

.spark-login #login form p {
	margin-bottom: 20px;
}

.spark-login.login .user-pass-wrap {
	margin-bottom: 20px;
}

.spark-login.login form .input,
.spark-login.login input[type="text"],
.spark-login.login input[type="email"],
.spark-login.login input[type="password"] {
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	min-height: 48px;
	box-sizing: border-box;
	font-size: 15px;
	line-height: 1.5;
	font-family: inherit;
	color: var( --spark-login-text, #1b1b21 );
	background: var( --spark-login-form-bg, #ffffff );
	border: 1px solid rgba( 27, 27, 33, 0.18 );
	border-radius: var( --spark-login-radius, 14px );
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The password field is monospaced by stock WordPress so a typed password
   lines up character by character. That is a deliberate readability choice
   for a field nobody can read, and it clashes with everything around it. */
.spark-login.login input.password-input {
	font-family: inherit;
	letter-spacing: 0.06em;
}

.spark-login.login form .input:focus,
.spark-login.login input[type="text"]:focus,
.spark-login.login input[type="email"]:focus,
.spark-login.login input[type="password"]:focus {
	border-color: var( --spark-login-accent, #4f39f6 );
	box-shadow: none;
	/* An outline rather than a tinted box-shadow: it tracks the configured
	   accent, needs no colour maths, and is the one focus style that still
	   renders in Windows High Contrast mode. */
	outline: 2px solid var( --spark-login-accent, #4f39f6 );
	outline-offset: 2px;
}

.spark-login.login ::placeholder {
	color: rgba( 27, 27, 33, 0.42 );
	opacity: 1;
}

/* The eye toggle. WordPress already ships it, positioned absolutely inside
   .wp-pwd — it only needs centring against a taller field and a colour. */
.spark-login.login .wp-pwd {
	position: relative;
}

.spark-login.login .button.wp-hide-pw {
	top: 50%;
	right: 4px;
	transform: translateY( -50% );
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	border-radius: 8px;
	color: rgba( 27, 27, 33, 0.5 );
}

.spark-login.login .button.wp-hide-pw:hover {
	color: var( --spark-login-text, #1b1b21 );
}

.spark-login.login .button.wp-hide-pw:focus {
	border-color: transparent;
	box-shadow: none;
	outline: 2px solid var( --spark-login-accent, #4f39f6 );
	outline-offset: 1px;
}

.spark-login.login .button.wp-hide-pw:active {
	transform: translateY( -50% );
}

/* ---------------------------------------------------- 5. Remember me + submit */

/* Stock floats .forgetmenot left and the submit button right, so they share a
   line inside a 320px column. The column is wider here and the button is full
   width, so both floats have to go or the button ends up beside the checkbox. */
.spark-login.login form .forgetmenot {
	float: none;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
}

.spark-login.login .forgetmenot label {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: rgba( 27, 27, 33, 0.72 );
}

.spark-login.login input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	border-radius: 5px;
	border: 1px solid rgba( 27, 27, 33, 0.28 );
}

.spark-login.login input[type="checkbox"]:checked {
	background: var( --spark-login-accent, #4f39f6 );
	border-color: var( --spark-login-accent, #4f39f6 );
}

.spark-login.login input[type="checkbox"]:focus {
	border-color: var( --spark-login-accent, #4f39f6 );
	box-shadow: none;
	outline: 2px solid var( --spark-login-accent, #4f39f6 );
	outline-offset: 2px;
}

/* The help toggletip WordPress 7.x adds beside "Remember me". */
.spark-login.login .wp-tooltip__toggle {
	color: rgba( 27, 27, 33, 0.45 );
}

.spark-login #login form p.submit {
	margin: 0;
}

.spark-login.login .button-primary,
.spark-login.login #wp-submit {
	float: none;
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 0 20px;
	font-size: 15px;
	font-weight: 600;
	line-height: 52px;
	text-align: center;
	text-shadow: none;
	color: var( --spark-login-accent-ink, #ffffff );
	background: var( --spark-login-accent, #4f39f6 );
	border: 0;
	/* A pill, not a rounded rectangle: the one place the shipped look commits
	   to a shape of its own instead of following --spark-login-radius. */
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.spark-login.login .button-primary:hover,
.spark-login.login #wp-submit:hover {
	filter: brightness( 1.08 );
	color: var( --spark-login-accent-ink, #ffffff );
	background: var( --spark-login-accent, #4f39f6 );
}

.spark-login.login .button-primary:active,
.spark-login.login #wp-submit:active {
	transform: translateY( 1px );
}

.spark-login.login .button-primary:focus,
.spark-login.login #wp-submit:focus {
	box-shadow: none;
	outline: 2px solid var( --spark-login-accent, #4f39f6 );
	outline-offset: 3px;
}

/* -------------------------------------------------------- 6. Links below it */

.spark-login.login #nav,
.spark-login.login #backtoblog {
	padding: 0;
	font-size: 14px;
	text-align: left;
}

.spark-login.login #nav {
	margin: 24px 0 0;
}

.spark-login.login #backtoblog {
	margin: 12px 0 0;
}

.spark-login.login #nav a,
.spark-login.login #backtoblog a {
	color: var( --spark-login-accent, #4f39f6 );
	font-weight: 500;
	text-decoration: none;
}

.spark-login.login #nav a:hover,
.spark-login.login #backtoblog a:hover {
	color: var( --spark-login-accent, #4f39f6 );
	text-decoration: underline;
}

.spark-login.login #nav a:focus,
.spark-login.login #backtoblog a:focus,
.spark-login.login h1 a:focus {
	box-shadow: none;
	border-radius: 4px;
	outline: 2px solid var( --spark-login-accent, #4f39f6 );
	outline-offset: 2px;
}

.spark-login--no-backtoblog.login #backtoblog {
	display: none;
}

/* ------------------------------------------------- 7. Notices and messages */

.spark-login.login .message,
.spark-login.login .notice,
.spark-login.login .success,
.spark-login.login #login_error {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-radius: var( --spark-login-radius, 14px );
	border-left-width: 4px;
	font-size: 14px;
	line-height: 1.5;
	box-shadow: none;
}

/* Informational notices take the accent. Errors and warnings deliberately do
   NOT: `.spark-login.login .notice` outranks core's `.login .notice-error`, so
   without the exclusions below a failed sign-in would be announced in the
   brand colour instead of red — the one message on this page that has to look
   like a problem. */
.spark-login.login .message,
.spark-login.login .notice:not( .notice-error ):not( .notice-warning ) {
	border-left-color: var( --spark-login-accent, #4f39f6 );
	background: rgba( 27, 27, 33, 0.045 );
}

.spark-login.login .success {
	background: rgba( 0, 124, 66, 0.07 );
}

/* Core gives the error a white background, which was a visible card against
   the grey page it used to sit on and is invisible against the form column. */
.spark-login.login .notice-error,
.spark-login.login #login_error {
	background: rgba( 214, 54, 56, 0.07 );
}

.spark-login.login .notice-warning {
	background: rgba( 219, 166, 23, 0.09 );
}

/* The language switcher, when the site has more than one language installed
   and the "Disable Login Screen Language Switcher" pill is off. It renders
   after #login, so inside the form column. */
.spark-login .language-switcher {
	margin: 28px auto 0;
	max-width: 400px;
	width: 100%;
}

.spark-login .language-switcher form {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* -------------------------------------------------------------- 8. The panel */

.spark-login-panel__copy {
	position: relative;
	/* Above the artwork layer, which is itself above the rings. The words are
	   the only thing on this panel anybody has to be able to read. */
	z-index: 3;
	padding: 56px clamp( 32px, 6vw, 80px );
	max-width: 30em;
}

/* A pool of the panel's own colour under the words, and ONLY when there is
   artwork to be read over. Without it the nine anchors are three usable ones
   and six traps: "centre" puts a white-filled illustration exactly where the
   white heading is, and the heading loses. Sized to the copy and faded to
   nothing well inside the panel, so an illustration anchored in a far corner
   is not dimmed for a collision that never happens. */
.spark-login-panel--has-art .spark-login-panel__copy::before {
	content: "";
	position: absolute;
	inset: -16% 0 -16% -20%;
	z-index: -1;
	/* Linear from the left, not a radial pool. The copy is left-aligned in
	   every one of the nine layouts, so the zone that needs protecting is
	   always the left of the panel — and a ramp that has already reached zero
	   by two thirds across leaves a right-anchored illustration untouched,
	   which a centred radial did not: it greyed the dog's head for a collision
	   that was not happening. */
	background: linear-gradient(
		to right,
		rgba( var( --spark-login-panel-rgb, 11, 16, 48 ), 0.92 ) 0%,
		rgba( var( --spark-login-panel-rgb, 11, 16, 48 ), 0.82 ) 34%,
		rgba( var( --spark-login-panel-rgb, 11, 16, 48 ), 0 ) 68%
	);
	/* The paint only fades sideways, so without this the box's top and bottom
	   stay hard: a straight seam right across whatever the panel is showing,
	   which is exactly what it looked like — a line cutting a decorative ring
	   in half, bright above and dimmed below. The mask dissolves those two
	   edges. Where mask-image is unsupported the seam simply comes back; it is
	   the same graceful loss the shapes below already accept. */
	-webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 22%, #000 78%, transparent 100% );
	mask-image: linear-gradient( to bottom, transparent 0%, #000 22%, #000 78%, transparent 100% );
	pointer-events: none;
}

.spark-login-panel__title {
	margin: 0 0 16px;
	font-size: clamp( 28px, 3.2vw, 44px );
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: #ffffff;
}

.spark-login-panel__text {
	margin: 0;
	font-size: clamp( 15px, 1.2vw, 18px );
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.72 );
	max-width: 34ch;
}

/* TEXTURE — the fine surface treatment, laid under everything else.
   One layer, four paints. The shared mask fades every one of them out towards
   the copy, so no texture ever puts a hard line under a word. */
.spark-login-panel__texture {
	position: absolute;
	inset: 0;
	z-index: 0;
	-webkit-mask-image: radial-gradient( 120% 90% at 70% 25%, #000 0%, rgba( 0, 0, 0, 0.35 ) 60%, transparent 100% );
	mask-image: radial-gradient( 120% 90% at 70% 25%, #000 0%, rgba( 0, 0, 0, 0.35 ) 60%, transparent 100% );
}

.spark-login-panel__texture--grid {
	background-image:
		linear-gradient( to right, rgba( 255, 255, 255, 0.055 ) 1px, transparent 1px ),
		linear-gradient( to bottom, rgba( 255, 255, 255, 0.055 ) 1px, transparent 1px );
	background-size: 46px 46px;
}

.spark-login-panel__texture--dots {
	background-image: radial-gradient( rgba( 255, 255, 255, 0.13 ) 1.4px, transparent 1.5px );
	background-size: 26px 26px;
}

.spark-login-panel__texture--diagonal {
	background-image: repeating-linear-gradient(
		45deg,
		rgba( 255, 255, 255, 0.06 ) 0 1px,
		transparent 1px 14px
	);
}

/* Not a pattern but a finish: a light raking across the panel and a shadow
   settling into the far corner. Reads as a surface rather than a texture,
   which is the point of having it in the list. */
.spark-login-panel__texture--sheen {
	background-image: linear-gradient(
		140deg,
		rgba( 255, 255, 255, 0.09 ) 0%,
		rgba( 255, 255, 255, 0 ) 46%,
		rgba( 0, 0, 0, 0.22 ) 100%
	);
}

/* The panel artwork. Everything that varies - the file, the anchor, the size,
   the opacity - is written by PHP; what lives here is the geometry those four
   settings are interpreted against.

   inset, not inset:0, so an anchored illustration keeps a margin instead of
   being welded to the panel edge: "bottom right" should read as placed, not as
   fallen out of the frame. It also means background-size is a share of the
   inset box rather than of the panel, which is close enough to what the number
   in the config claims and never larger than it. */
.spark-login-panel__art {
	position: absolute;
	inset: 6%;
	z-index: 2;
	background-repeat: no-repeat;
	background-size: 46% auto;
	background-position: right bottom;
	/* Decoration. It must never eat a click meant for the form, and on a
	   narrow panel it can overlap the copy. */
	pointer-events: none;
}

/* SHAPE — two large forms bled off opposite corners.

   Geometry and colour are shared by all four variants; only the mask differs.
   That is what keeps them a family instead of four unrelated effects, and it
   means a client switching between them sees the same composition wearing a
   different treatment rather than a different panel.

   Every variant is a gradient-filled circle: a `border` can only ever be one
   flat colour, so a ring whose stroke is itself a gradient has to be painted
   solid and then have its middle taken away. Where mask-image is unsupported
   they all fall back to that filled disc — a shape, not a broken layout. */
.spark-login-panel__shape {
	position: absolute;
	z-index: 1;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --spark-login-ring-1, #5b45f6 ), var( --spark-login-ring-2, #241a7a ) );
	pointer-events: none;
}

.spark-login-panel__shape--a {
	width: 44%;
	top: -12%;
	left: -9%;
}

.spark-login-panel__shape--b {
	width: 52%;
	right: -14%;
	bottom: -18%;
}

/* A single stroke. */
.spark-login-panel__shape--rings {
	-webkit-mask-image: radial-gradient( closest-side, transparent 0 68%, #000 69% 100% );
	mask-image: radial-gradient( closest-side, transparent 0 68%, #000 69% 100% );
}

/* No mask at all: the circle stays filled. The loudest of the four, and the
   one that wants restrained ring colours. */
.spark-login-panel__shape--discs {
	-webkit-mask-image: none;
	mask-image: none;
}

/* Ambient light rather than a drawn shape. The falloff lives in the mask, not
   in the gradient: a colour ramp ending at the keyword `transparent` ends at
   transparent BLACK and would smudge the bloom grey on its way out. Bigger
   than the others because a glow that stops at an edge is not a glow. */
.spark-login-panel__shape--glow {
	-webkit-mask-image: radial-gradient( closest-side, #000 0%, rgba( 0, 0, 0, 0.45 ) 42%, transparent 100% );
	mask-image: radial-gradient( closest-side, #000 0%, rgba( 0, 0, 0, 0.45 ) 42%, transparent 100% );
}

.spark-login-panel__shape--glow.spark-login-panel__shape--a {
	width: 68%;
	top: -22%;
	left: -20%;
}

.spark-login-panel__shape--glow.spark-login-panel__shape--b {
	width: 76%;
	right: -26%;
	bottom: -30%;
}

/* Three strokes instead of one. */
.spark-login-panel__shape--arcs {
	-webkit-mask-image: radial-gradient(
		closest-side,
		transparent 0 38%, #000 39% 46%,
		transparent 47% 62%, #000 63% 70%,
		transparent 71% 86%, #000 87% 94%,
		transparent 95% 100%
	);
	mask-image: radial-gradient(
		closest-side,
		transparent 0 38%, #000 39% 46%,
		transparent 47% 62%, #000 63% 70%,
		transparent 71% 86%, #000 87% 94%,
		transparent 95% 100%
	);
}

/* ------------------------------------------------------------ 9. Preferences */

@media ( prefers-reduced-motion: reduce ) {
	.spark-login.login * {
		transition: none !important;
	}
}