/* SOLNRUS sign-in.
 *
 * Loads only on /login, via the `head_include` block of solnrus/www/login.html,
 * which places it after Frappe's login.bundle.css. The card markup is inherited
 * from Frappe, so the rules that restyle it are written to out-specify
 * login.bundle.css (`.for-login .page-card`, 0-2-0) rather than to shout over it
 * with !important - `.solnrus-login .login-content.page-card` is 0-3-0 and wins
 * on its own. Keep it that way: !important here would also override the
 * .hide class login.js uses to switch between the four forms.
 */

:root {
	--solnrus-navy: #011b33;
	--solnrus-navy-deep: #010f1d;
	--solnrus-gold: #c5a059;
	--solnrus-gold-ink: #8e6822;
	--solnrus-cream: #fffdf8;
	--solnrus-rule: #eadfca;
}

/* The stock page furniture has nothing to show on a sign-in screen. */
body.solnrus-login-page .page-breadcrumbs,
body.solnrus-login-page .page-header-wrapper,
body.solnrus-login-page .page-footer,
body.solnrus-login-page .web-footer {
	display: none !important;
}

body.solnrus-login-page {
	background: var(--solnrus-navy-deep);
	min-height: 100vh;
}

body.solnrus-login-page .page-content-wrapper,
body.solnrus-login-page .page_content {
	padding: 0;
	margin: 0;
}

/* ---- Layout ------------------------------------------------------------- */

.solnrus-login {
	display: grid;
	grid-template-columns: 1.02fr 1fr;
	min-height: 100vh;
}

/* ---- Brand panel -------------------------------------------------------- */

.solnrus-login__brand {
	background:
		radial-gradient(circle at 22% 18%, rgba(197, 160, 89, .20), transparent 42%),
		linear-gradient(155deg, var(--solnrus-navy-deep), var(--solnrus-navy) 52%, #0d1820);
	color: #f3ece0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: 64px 60px;
	position: relative;
}

.solnrus-login__brand::after {
	/* The seam between the two halves, rather than a flat border. */
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(197, 160, 89, .55), transparent);
}

.solnrus-login__brandtop {
	align-items: center;
	display: flex;
	gap: 20px;
}

.solnrus-login__seal {
	border-radius: 50%;
	flex: 0 0 104px;
	height: 104px;
	object-fit: contain;
	width: 104px;
}

.solnrus-login__wordmark {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.solnrus-login__wordmark strong {
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 34px;
	font-weight: 600;
	letter-spacing: .17em;
	line-height: 40px;
}

.solnrus-login__wordmark span {
	color: var(--solnrus-gold);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 18px;
	text-transform: uppercase;
}

.solnrus-login__points {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	max-width: 30rem;
	padding: 0;
}

.solnrus-login__points li {
	color: rgba(243, 236, 224, .84);
	font-size: 15px;
	line-height: 23px;
	padding-left: 30px;
	position: relative;
}

.solnrus-login__points li::before {
	background: var(--solnrus-gold);
	border-radius: 50%;
	content: "";
	height: 7px;
	left: 8px;
	position: absolute;
	top: 8px;
	width: 7px;
}

.solnrus-login__legal {
	color: rgba(243, 236, 224, .45);
	font-size: 12px;
	line-height: 18px;
	margin: 0;
}

/* ---- Form column -------------------------------------------------------- */

.solnrus-login__panel {
	align-items: center;
	background: linear-gradient(180deg, #14202b, #0d1620);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 32px;
}

.solnrus-login__compact {
	align-items: center;
	display: none;
	gap: 14px;
	margin-bottom: 26px;
}

.solnrus-login__compact img {
	border-radius: 50%;
	flex: 0 0 60px;
	height: 60px;
	width: 60px;
}

.solnrus-login__compact div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.solnrus-login__compact strong {
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 21px;
	letter-spacing: .14em;
	line-height: 26px;
}

.solnrus-login__compact span {
	color: var(--solnrus-gold);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 15px;
	text-transform: uppercase;
}

/* ---- The inherited card ------------------------------------------------- */

.solnrus-login .login-content.page-card {
	background: var(--solnrus-cream);
	border: 1px solid rgba(197, 160, 89, .55);
	border-radius: 18px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .46);
	margin: 0;
	max-width: 452px;
	padding: 38px 40px 34px;
	width: 100%;
}

/* Frappe caps the inner form at 320px, which leaves the wider card half empty. */
.solnrus-login .login-content.page-card form {
	max-width: none;
}

/* The card is NOT a direct child of the flex column: super() wraps it in an
   unclassed <div> and a <section>. Under align-items:center those wrappers
   shrink to their content, so the card never reaches its own max-width. Give the
   wrappers the width instead of trying to stretch the card. */
.solnrus-login__panel > div:not(.solnrus-login__compact),
.solnrus-login__panel section {
	max-width: 452px;
	width: 100%;
}

/* `logo_section()` renders .page-card-head as a SIBLING *before* the card, not
   inside it - so this heading sits on the dark panel, not on the cream. It is
   coloured for that background; a navy heading here is navy-on-navy. */
.solnrus-login .page-card-head {
	border: 0;
	margin: 0 0 22px;
	padding: 0;
	text-align: center;
}

/* The seal already appears in the brand panel and the compact lockup. */
.solnrus-login .page-card-head .app-logo {
	display: none;
}

.solnrus-login .page-card-head h4 {
	color: #f3ece0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 25px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 32px;
	margin: 0;
}

.solnrus-login .form-control {
	background: #fff;
	border: 1px solid #d7d2c7;
	border-radius: 10px;
	min-height: 46px;
}

.solnrus-login .form-control:focus {
	border-color: #b68c39;
	box-shadow: 0 0 0 3px rgba(197, 160, 89, .18);
}

.solnrus-login .btn-primary {
	background: var(--solnrus-navy);
	border: 1px solid var(--solnrus-gold);
	border-radius: 10px;
	color: #fff;
	font-weight: 700;
	letter-spacing: .02em;
	min-height: 46px;
	transition: background .15s ease, transform .15s ease;
}

.solnrus-login .btn-primary:hover,
.solnrus-login .btn-primary:focus {
	background: #0b2a43;
	transform: translateY(-1px);
}

/* The email-link button inherits Frappe's 29px default, under a comfortable
   touch target on the phones this form is filled in on. */
.solnrus-login .btn-default {
	border-radius: 10px;
	min-height: 46px;
}

.solnrus-login a {
	color: var(--solnrus-gold-ink);
}

.solnrus-login .page-card-actions {
	margin-top: 24px;
}

/* ---- Responsive --------------------------------------------------------- */

/* The brand panel is the first thing to go: it is decorative, and below this
   width it would push the form itself off a phone screen. */
@media (max-width: 900px) {
	.solnrus-login {
		grid-template-columns: 1fr;
	}

	.solnrus-login__brand {
		display: none;
	}

	.solnrus-login__compact {
		display: flex;
	}

	.solnrus-login__panel {
		background:
			radial-gradient(circle at 18% 14%, rgba(197, 160, 89, .16), transparent 34%),
			linear-gradient(150deg, var(--solnrus-navy-deep), #0d1820 58%, #12110d);
		min-height: 100vh;
		padding: 32px 20px;
	}
}

@media (max-width: 600px) {
	.solnrus-login .login-content.page-card {
		border-radius: 15px;
		padding: 26px 22px 24px;
	}

	.solnrus-login .page-card-head h4 {
		font-size: 21px;
		line-height: 27px;
	}

	/* 16px stops iOS Safari zooming the page when a credential field takes
	   focus, which otherwise leaves the sign-in button scrolled off screen.
	   Written at 0-4-1 to beat login.bundle.css's 0-3-1 on the same inputs. */
	.solnrus-login .login-content.page-card .page-card-body input[type="text"],
	.solnrus-login .login-content.page-card .page-card-body input[type="email"],
	.solnrus-login .login-content.page-card .page-card-body input[type="password"],
	.solnrus-login .login-content.page-card .page-card-body .form-control {
		font-size: 16px;
	}
}

@media (max-width: 400px) {
	.solnrus-login__panel {
		padding: 20px 12px;
	}

	.solnrus-login .login-content.page-card {
		padding: 22px 16px 20px;
	}

	.solnrus-login__compact img {
		flex-basis: 50px;
		height: 50px;
		width: 50px;
	}

	.solnrus-login__compact strong {
		font-size: 18px;
		letter-spacing: .1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.solnrus-login .btn-primary {
		transition: none;
	}

	.solnrus-login .btn-primary:hover,
	.solnrus-login .btn-primary:focus {
		transform: none;
	}
}

/* ---- The workforce network --------------------------------------------- *
 *
 * SOLNRUS is not a TimeClock with extras: recruitment feeds onboarding,
 * onboarding produces an employee, the employee is attached to a property, the
 * property generates time and time becomes payroll. The brand panel had a large
 * empty middle and said none of that, so the network is drawn there - as
 * structure rather than as decoration.
 *
 * Pure CSS on inline SVG. No animation library, no rAF loop, nothing to leak,
 * and a browser throttles CSS animation in a background tab without being
 * asked. It is behind the content, at an opacity chosen so that a path crossing
 * behind a line of text cannot change what that text reads against - the panel
 * background is what the words are measured on, and it is unchanged.
 */

.solnrus-login__net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.solnrus-login__links path {
	fill: none;
	stroke: rgba(197, 160, 89, .22);
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.solnrus-login__nodes circle {
	fill: rgba(232, 200, 125, .34);
}

/* One node breathing very slowly, so the network reads as live rather than as
   a printed diagram. Three of nine, not all of them. */
.solnrus-login__nodes circle:nth-child(1),
.solnrus-login__nodes circle:nth-child(5),
.solnrus-login__nodes circle:nth-child(9) {
	animation: solnrus-node 9s ease-in-out infinite;
}

.solnrus-login__nodes circle:nth-child(5) { animation-delay: 3s; }
.solnrus-login__nodes circle:nth-child(9) { animation-delay: 6s; }

@keyframes solnrus-node {
	0%, 100% { fill: rgba(232, 200, 125, .30); }
	50% { fill: rgba(232, 200, 125, .62); }
}

/* A single gold pulse travelling one connection at a time. `stroke-dasharray`
   with a moving offset draws a short lit segment along the path - one property
   animating, which is the cheapest kind of motion there is. */
.solnrus-login__pulse {
	fill: none;
	stroke: #e8c87d;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 26 940;
	stroke-dashoffset: 966;
	opacity: .8;
	animation: solnrus-pulse 14s linear infinite;
}

.solnrus-login__pulse--2 { animation-delay: 4.6s; }
.solnrus-login__pulse--3 { animation-delay: 9.2s; }

@keyframes solnrus-pulse {
	0% { stroke-dashoffset: 966; opacity: 0; }
	6% { opacity: .85; }
	26% { stroke-dashoffset: 0; opacity: .85; }
	32% { opacity: 0; }
	100% { stroke-dashoffset: 0; opacity: 0; }
}

/* The brand content sits above the network, always. */
.solnrus-login__brandtop,
.solnrus-login__points,
.solnrus-login__legal {
	position: relative;
	z-index: 1;
}

/* Soft illumination behind the seal rather than on it: the mark itself does not
   move, spin or scale. */
.solnrus-login__brandtop::before {
	content: "";
	position: absolute;
	left: -34px;
	top: -34px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(197, 160, 89, .20), transparent 68%);
	z-index: -1;
	animation: solnrus-seal-glow 11s ease-in-out infinite;
}

@keyframes solnrus-seal-glow {
	0%, 100% { opacity: .55; }
	50% { opacity: 1; }
}

/* ---- The card heading --------------------------------------------------- */

/* Frappe's own login heading is replaced rather than restyled. Scoped to the
   login section on purpose: forgot-password and email-link keep theirs, because
   those screens still need to say which one they are. */
.solnrus-login .for-login > .page-card-head {
	display: none;
}

.solnrus-login__head {
	margin: 0 0 22px;
}

.solnrus-login__head h1 {
	margin: 0 0 6px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #10243a;
}

.solnrus-login__head p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	/* 4.9:1 on the cream card. A supporting line is still a line to be read. */
	color: #4d5f70;
}

/* ---- Entrance ----------------------------------------------------------- */

/* One movement, once, on arrival. Nothing on this page moves while somebody is
   typing into it. */
.solnrus-login__panel > * {
	animation: solnrus-rise 520ms cubic-bezier(.22, .61, .36, 1) both;
}

.solnrus-login__brandtop { animation: solnrus-rise 620ms cubic-bezier(.22, .61, .36, 1) both; }
.solnrus-login__points { animation: solnrus-rise 620ms 120ms cubic-bezier(.22, .61, .36, 1) both; }
.solnrus-login__legal { animation: solnrus-rise 620ms 220ms cubic-bezier(.22, .61, .36, 1) both; }

@keyframes solnrus-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ---- Reduced motion ----------------------------------------------------- *
 *
 * Everything above is decoration. Switched off, the page keeps its layout, its
 * network diagram, its illumination and every word - it simply stops moving. */

@media (prefers-reduced-motion: reduce) {
	.solnrus-login__pulse,
	.solnrus-login__nodes circle,
	.solnrus-login__brandtop::before,
	.solnrus-login__panel > *,
	.solnrus-login__brandtop,
	.solnrus-login__points,
	.solnrus-login__legal {
		animation: none !important;
	}
	.solnrus-login__panel > *,
	.solnrus-login__brandtop,
	.solnrus-login__points,
	.solnrus-login__legal {
		opacity: 1 !important;
		transform: none !important;
	}
	/* The pulse is a lit segment on a path; with no animation it would sit
	   frozen mid-connection, so it is simply not drawn. */
	.solnrus-login__pulses { display: none; }
}

/* ---- Narrow screens ----------------------------------------------------- *
 *
 * Desktop animation density is not forced onto a phone. The brand panel is
 * already dropped below the split breakpoint, which takes the network with it. */

@media (max-width: 900px) {
	.solnrus-login__pulse--3 { display: none; }
	.solnrus-login__nodes circle { animation: none; }
}

/* ---- Frappe's muted tone, on a SOLNRUS card ----------------------------- *
 *
 * `Show`, `Forgot Password?` and the `or` divider inherit login.bundle.css's
 * #7c7c7c, which is 4.11:1 on the cream card - under AA for text this size, and
 * on exactly the three controls somebody hunts for when a sign-in is not
 * working. Darkened to a slate that belongs to the palette and clears 4.9:1.
 * The colour is the only thing changed; every binding login.js makes to these
 * elements is untouched. */

/* Measured, not assumed: login.bundle.css carries
   `.text-muted { color: #7c7c7c !important }` - a literal, with !important. A
   token re-point cannot reach it and no reasonable specificity beats it, so
   !important is the only thing that does.
   
   That is allowed here and only here. The warning at the top of this file is
   about `display`: an !important display rule would override the `.hide` class
   login.js switches the four forms with, and break authentication navigation.
   This declares `color`, on three specific controls, and cannot affect which
   form is on screen. */
.solnrus-login .toggle-password,
.solnrus-login .forgot-password-message a,
.solnrus-login .login-divider,
.solnrus-login .text-muted {
	color: #5d6b78 !important;
}

.solnrus-login .forgot-password-message a:hover,
.solnrus-login .toggle-password:hover {
	color: var(--solnrus-gold-ink);
}