/* Amana's sign-in (change 281's look, the only one since change 289). One warm stone page: on the left the organisation's crest
   and name in a small white bar, a big headline with a short stroke of the organisation's colour (--amana-brand) under it, what
   Amana is for, and the verse of the day; on the right Frappe's own form in a white card, its Continue a pill in the
   organisation's colour. A phone shows one column: the crest and name, a smaller headline, the card. Every rule is under
   body.amana-signin: no other page sees it. Frappe's form, buttons and their behaviour are untouched; only their look changes.
   Dark mode follows the computer's own setting. */

/* (the page sets these from Settings › Display; Navy when not) */
/* (change 309) --amana-brand-dark: the colour made light enough for dark mode (display_rules.dark_accent, the app's own dark accent),
   --amana-on-brand-dark the writing on it (white or near-black, whichever reads) */
:root { --amana-brand: #1f3a5f; --amana-brand-dark: #6994ce; --amana-on-brand-dark: #0f1216; --amana-shade: rgba(25, 46, 76, 0.7);
	--amana-shade-solid: #192e4c; }

body.amana-signin {
	--amana-side: 54%;
	--amana-page: #f7f6f2;
	--amana-card: #ffffff;
	--amana-ink: #1c1917;
	--amana-ink-2: #57534e;
	--amana-ink-3: #6b645d;
	--amana-line: #e2dfd9;
	--amana-field: #ffffff;
	--amana-link: var(--amana-brand);
	--amana-accent: var(--amana-brand);
	/* the main button's colour: the organisation's own; lighter in dark mode (change 289), so it stands out on the dark card */
	--amana-button: var(--amana-brand);
	--amana-button-ink: #ffffff;
	--amana-shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 18px 44px -14px rgba(28, 25, 23, 0.2);
	position: relative;
	min-height: 100vh;
	color: var(--amana-ink);
	background-color: var(--amana-page);
	/* a faint glow of the organisation's colour behind the headline, another behind the card */
	background-image:
		radial-gradient(ellipse 48% 42% at 24% 42%, color-mix(in srgb, var(--amana-brand) 7%, transparent), transparent 72%),
		radial-gradient(ellipse 36% 38% at 80% 70%, color-mix(in srgb, var(--amana-brand) 5%, transparent), transparent 72%);
	background-attachment: fixed;
	overflow-x: hidden;
}
body.amana-signin .page-breadcrumbs,
body.amana-signin .page-header-wrapper,
body.amana-signin .web-footer { display: none !important; }

/* ---------------------------------------------------------------- the organisation's part (left) */
body.amana-signin .amana-side {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--amana-side);
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 36px clamp(32px, 5.5vw, 88px) 44px;
	color: var(--amana-ink);
}
/* the crest and name: a small white bar floating on the page */
body.amana-signin .amana-org {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: min(100%, 440px);
	box-sizing: border-box;
	padding: 7px 22px 7px 7px;
	border-radius: 28px;
	background: var(--amana-card);
	box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06), 0 6px 18px -8px rgba(28, 25, 23, 0.18);
}
body.amana-signin .amana-crest {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
body.amana-signin .amana-crest img { max-width: 84%; max-height: 84%; object-fit: contain; }
body.amana-signin .amana-org-name {
	min-width: 0;
	padding: 4px 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--amana-ink);
	overflow-wrap: anywhere;
}

/* the headline, its stroke and what Amana is for */
body.amana-signin .amana-side-body { margin: auto 0; max-width: 640px; }
body.amana-signin .amana-headline {
	margin: 0;
	padding: 0;
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--amana-ink);
	overflow-wrap: anywhere;
}
body.amana-signin .amana-line { display: block; }
body.amana-signin .amana-accent { color: var(--amana-accent); }
body.amana-signin .amana-stroke {
	display: block;
	width: 72px;
	height: 6px;
	margin: 28px 0 26px;
	border-radius: 999px;
	background: var(--amana-brand);
}
body.amana-signin .amana-tagline {
	margin: 0;
	max-width: 30em;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--amana-ink);
}

/* the verse of the day: muted, its reference in small capitals */
body.amana-signin .amana-verse {
	margin: 0;
	max-width: 36em;
	padding-top: 20px;
	border-top: 1px solid var(--amana-line);
}
body.amana-signin .amana-label,
body.amana-signin .amana-verse figcaption {
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--amana-ink-3);
}
body.amana-signin .amana-verse blockquote {
	margin: 8px 0 10px;
	padding: 0;
	border: 0;
	font-size: 16.5px;
	line-height: 1.6;
	font-style: normal;
	font-weight: 400;
	color: var(--amana-ink-2);
}
body.amana-signin .amana-verse figcaption { color: var(--amana-ink); }

/* ---------------------------------------------------------------- Amana's part (right): Frappe's own form in a white card */
body.amana-signin .page-content-wrapper {
	margin-left: var(--amana-side);
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px clamp(24px, 4vw, 64px) 40px 16px;
	background: transparent;
}
body.amana-signin .page-content-wrapper > main.container { width: 100%; max-width: 448px; padding: 0; margin: 0 auto; }
/* the card: the form, the help line and (on a demo site) its logins */
body.amana-signin .page_content {
	min-height: 0 !important;
	box-sizing: border-box;
	padding: 40px 38px 30px;
	border-radius: 20px;
	background: var(--amana-card);
	box-shadow: var(--amana-shadow);
}
body.amana-signin .page-card {
	min-height: 0 !important;
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
body.amana-signin .page-card-head { align-items: flex-start !important; text-align: left !important; gap: 24px !important; }
body.amana-signin .page-card-head h4 {
	color: var(--amana-ink) !important;
	font-size: 30px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.025em;
}
body.amana-signin .page-card-subtitle { color: var(--amana-ink-2) !important; font-size: 15px; line-height: 1.5; }

/* Amana's logo and its name */
body.amana-signin .amana-logo { display: flex; align-items: center; gap: 10px; }
body.amana-signin .amana-logo img.app-logo,
body.amana-signin img.app-logo { width: 36px !important; height: 36px !important; max-width: none; margin: 0; object-fit: contain; }
body.amana-signin .amana-logo span { font-size: 17px; font-weight: 750; letter-spacing: -0.005em; color: var(--amana-ink); }

/* the fields: rounded, a little taller, so a phone does not zoom in, with the organisation's colour around the one being typed in */
body.amana-signin .page-card-body label { color: var(--amana-ink) !important; font-weight: 600; font-size: 13.5px; }
body.amana-signin .page-card-body input[type="text"],
body.amana-signin .page-card-body input[type="email"],
body.amana-signin .page-card-body input[type="password"] {
	height: 46px !important;
	padding-left: 14px !important;
	font-size: 16px !important;
	border-radius: 12px !important;
	border: 1px solid var(--amana-line) !important;
	background: var(--amana-field) !important;
	color: var(--amana-ink) !important;
	box-shadow: none !important;
}
body.amana-signin .page-card-body input:focus {
	border-color: var(--amana-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--amana-accent) 20%, transparent) !important;
	outline: none;
}

/* the main button (Continue, Send Link, Confirm): a pill in the organisation's colour, white writing (Settings › Display only
   offers colours dark enough for white writing on them); Continue carries an arrow */
body.amana-signin .es-button[data-variant="solid"],
body.amana-signin .btn-primary {
	background: var(--amana-button) !important;
	border-color: var(--amana-button) !important;
	color: var(--amana-button-ink) !important;
	height: 48px;
	font-size: 15.5px;
	font-weight: 650;
	border-radius: 999px !important;
	box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--amana-button) 70%, transparent);
}
body.amana-signin .for-login .es-button[data-variant="solid"]::after { content: "\2192"; margin-left: 8px; }
body.amana-signin .es-button[data-variant="solid"]:hover:not(:disabled),
body.amana-signin .btn-primary:hover:not(:disabled) {
	background: color-mix(in srgb, var(--amana-button) 86%, #000000) !important;
}
body.amana-signin .es-button[data-variant="solid"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--amana-brand) 45%, transparent); outline-offset: 2px; }
body.amana-signin .es-button[data-variant="solid"]:disabled { opacity: 0.6; }

/* links: Forgot password?, Back to sign in; "Email me a sign-in link" as a quiet link, not a second button */
body.amana-signin .page-card a:not(.es-button),
body.amana-signin .page-card a.amana-quiet { color: var(--amana-link) !important; font-weight: 600; }
body.amana-signin .page-card a:not(.es-button):hover,
body.amana-signin .page-card a.amana-quiet:hover { text-decoration: underline; }
body.amana-signin .page-card a.amana-quiet {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
	min-height: 32px;
	align-self: center;
	padding: 4px 6px !important;
	font-size: 14px;
}
body.amana-signin .amana-not-you {
	background: none;
	border: 0;
	padding: 0;
	color: var(--amana-link);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* the help line, at the foot of the card */
body.amana-signin .amana-help {
	margin: 26px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--amana-line);
	text-align: center;
	font-size: 13.5px;
	color: var(--amana-ink-2);
}
body.amana-signin .amana-help a { color: var(--amana-link); font-weight: 600; white-space: nowrap; }
/* (before the script moves it into the card, the help line waits out of sight) */
body.amana-signin > .amana-help { display: none; }

/* ---------------------------------------------------------------- a phone or a small tablet: one column */
@media (max-width: 899px) {
	body.amana-signin { display: flex; flex-direction: column; }
	body.amana-signin .amana-side {
		order: -1;
		position: static;
		width: auto;
		min-height: 0;
		gap: 22px;
		padding: 18px 16px 4px;
	}
	body.amana-signin .amana-org { padding: 5px 16px 5px 5px; gap: 10px; }
	body.amana-signin .amana-crest { width: 36px; height: 36px; }
	body.amana-signin .amana-org-name { font-size: 14px; }
	body.amana-signin .amana-side-body { margin: 0; }
	body.amana-signin .amana-headline { font-size: clamp(32px, 9vw, 46px); }
	body.amana-signin .amana-stroke { width: 56px; height: 5px; margin: 18px 0 0; }
	body.amana-signin .amana-tagline,
	body.amana-signin .amana-verse { display: none; }
	body.amana-signin .page-content-wrapper { margin-left: 0; min-height: 0; align-items: flex-start; padding: 22px 16px 32px; }
	body.amana-signin .page_content { padding: 28px 22px 22px; }
	body.amana-signin .page-card-head h4 { font-size: 26px; }
}

/* ---------------------------------------------------------------- dark mode, as the computer is set */
@media (prefers-color-scheme: dark) {
	body.amana-signin {
		/* (change 309) the app's dark mode: GariHub's graphite (theme.js SURFACES.dark), the card a step lighter than the page */
		--amana-page: #0f1216;
		--amana-card: #181c21;
		--amana-ink: #e9ebee;
		--amana-ink-2: #c3c8ce;
		--amana-ink-3: #959ea8;
		--amana-line: #39414a;
		--amana-field: #13171c;
		/* the colour made light enough to read on the dark page, keeping its hue (the app's dark accent), for the links, the
		   stroke and the button, the button's writing white or near-black, whichever reads */
		--amana-link: var(--amana-brand-dark);
		--amana-accent: var(--amana-brand-dark);
		--amana-button: var(--amana-brand-dark);
		--amana-button-ink: var(--amana-on-brand-dark);
		--amana-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 44px -14px rgba(0, 0, 0, 0.6);
		color-scheme: dark;
	}
	body.amana-signin .amana-stroke { background: var(--amana-accent); }
	body.amana-signin .page-card-body input::placeholder { color: #7d8691; }
}