/* BlackOwl - Aussehen der oeffentlichen Passwortseiten.
   Erzeugt von deploy/mail/58-rueckholseite-gestalten.sh - nicht von Hand
   flicken.

   Vorbild ist blackowl.cc: eine mittig stehende Karte, die Marke darueber,
   eine Haarlinie als Trenner, ein leises Gluehen beim Zeigen. Farben und
   Werte stammen von dort (und dort wiederum aus dem Admin-Panel).

   ⚠️ ALLE MASSE IN PIXEL, KEIN rem. Bootstrap 3 setzt `html { font-size:
   10px }` - ein rem ist hier also nicht 16, sondern 10 Pixel. Der erste
   Entwurf war durchgehend in rem geschrieben und kam deshalb auf 62,5 %
   der gemeinten Groessen heraus: 65 statt 104 Pixel Abstand, ein Logo von
   22 statt 35 Pixeln, eine Spalte von 300 statt 480. Gemessen im Browser,
   nicht im Quelltext gesehen - im Quelltext sah alles richtig aus. */

:root {
	--bo-bg: #0b0b0d;
	--bo-surface: #131316;
	--bo-surface-2: #1b1b20;
	--bo-border: #26262e;
	--bo-border-hover: #7e2321;
	--bo-text: #cfcfd6;
	--bo-text-dim: #797984;
	--bo-accent: #e23b34;
	--bo-accent-deep: #b0201e;
	--bo-glow: 0 0 18px rgba(226, 59, 52, 0.16);
}

/* ⚠️ ALLES HAENGT AN DEN KOERPERKLASSEN. Diese Datei wird auch in der
   Verwaltung geladen; ohne die Einschraenkung faerbte sie Seiten ein, die
   niemand aendern wollte. */
body.page-password-recover,
body.page-password-change {
	background: var(--bo-bg) linear-gradient(180deg, #0d0d10 0%, var(--bo-bg) 352px) no-repeat;
	color: var(--bo-text);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
	min-height: 100vh;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px 24px;
}

/* Die Kopfleiste faellt weg - die Marke steht in der Karte, wie auf
   blackowl.cc. Eine Leiste mit einem Logo, das nirgendwohin fuehrt, ist
   Zierde ohne Aufgabe. Die zwei <br> aus der Vorlage gehen mit. */
body.page-password-recover .navbar,
body.page-password-change .navbar,
body.page-password-recover > .container > br,
body.page-password-change > .container > br {
	display: none;
}

/* Die Karte. ⚠️ Die Breite steht als Inline-Stil in der Vorlage
   (min-width: 600px) - ohne !important bliebe sie stehen, und auf dem
   Telefon ragte die Seite aus dem Bild. Ausgerechnet dort oeffnen die
   meisten eine Passwortmail. */
body.page-password-recover > .container,
body.page-password-change > .container {
	min-width: 0 !important;
	width: 100% !important;
	max-width: 544px !important;
	margin: 0 auto;
	background: var(--bo-surface);
	border: 1px solid var(--bo-border);
	border-radius: 14px;
	padding: 40px 32px 32px;
	text-align: center;
	transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

/* Die Marke. Sie steht in der Vorlage nur in der Kopfleiste, die hier weg
   ist - also wird sie hier gesetzt. */
body.page-password-recover > .container::before,
body.page-password-change > .container::before {
	content: "";
	display: block;
	width: 210px;
	height: 140px;
	margin: 0 auto 24px;
	background: url("logo.png") center/contain no-repeat;
}

/* Dieselbe Bewegung wie eine Kachel im Panel und wie die Karte auf
   blackowl.cc. Nur wo es wirklich einen Zeiger gibt - auf dem Telefon
   bliebe der Zustand nach dem Antippen haengen. */
@media (hover: hover) {
	body.page-password-recover > .container:hover,
	body.page-password-change > .container:hover {
		border-color: var(--bo-border-hover);
		box-shadow: var(--bo-glow);
		transform: translateY(-2px);
	}
}

body.page-password-recover h2.h2,
body.page-password-change h2.h2 {
	margin: 0;
	font-size: 26px;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--bo-text);
}

/* Die Trennlinie von blackowl.cc: in der Mitte hell, zu den Enden
   verlaufend. Sie steht nicht im Quelltext, also kommt sie ans Ende der
   Ueberschrift. */
body.page-password-recover h2.h2::after,
body.page-password-change h2.h2::after {
	content: "";
	display: block;
	height: 1px;
	margin: 28px 0;
	background: linear-gradient(90deg, transparent, var(--bo-accent-deep) 30%, var(--bo-accent) 50%, var(--bo-accent-deep) 70%, transparent);
	opacity: 0.55;
}

/* Das Formular steht links - eine mittig ausgerichtete Beschriftung ueber
   einem Eingabefeld liest sich nicht. */
body.page-password-recover form,
body.page-password-change form {
	text-align: left;
	margin: 0;
}
body.page-password-recover label,
body.page-password-change label {
	color: var(--bo-text-dim);
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 6px;
}
body.page-password-recover .form-control,
body.page-password-change .form-control {
	background: var(--bo-surface-2);
	border: 1px solid var(--bo-border);
	color: var(--bo-text);
	border-radius: 9px;
	height: auto;
	padding: 11px 12px;
	font-size: 15px;
	box-shadow: none;
}
body.page-password-recover .form-control:focus,
body.page-password-change .form-control:focus {
	background: var(--bo-surface-2);
	color: var(--bo-text);
	border-color: var(--bo-accent);
	box-shadow: 0 0 0 3px rgba(226, 59, 52, 0.18);
}
body.page-password-recover .btn-primary,
body.page-password-change .btn-primary {
	background: linear-gradient(180deg, var(--bo-accent), var(--bo-accent-deep));
	border: 1px solid var(--bo-accent-deep);
	border-radius: 9px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 600;
	text-shadow: none;
	margin-top: 6px;
}
body.page-password-recover .btn-primary:hover,
body.page-password-change .btn-primary:hover,
body.page-password-recover .btn-primary:focus,
body.page-password-change .btn-primary:focus {
	background: linear-gradient(180deg, #ee4b44, #c42523);
	border-color: var(--bo-accent-deep);
}
body.page-password-recover .btn-primary:focus-visible,
body.page-password-change .btn-primary:focus-visible {
	outline: 2px solid var(--bo-accent);
	outline-offset: 2px;
}

/* Meldungen - etwa "Wir haben Ihre Anfrage erhalten". */
body.page-password-recover .alert,
body.page-password-change .alert,
body.page-password-recover .flash_info,
body.page-password-change .flash_info,
body.page-password-recover .flash_error,
body.page-password-change .flash_error {
	background: var(--bo-surface-2);
	border: 1px solid var(--bo-border);
	border-left: 3px solid var(--bo-accent);
	border-radius: 9px;
	color: var(--bo-text);
	text-align: left;
	text-shadow: none;
}

/* Die Fusszeile traegt Fassungsnummer und einen Link zum Hersteller. In der
   Verwaltung ist das nuetzlich, auf einer oeffentlichen Passwortseite nicht.
   Der Verteiler auf dem VPS ersetzt zusaetzlich den Seitentitel
   (57-webmail-veroeffentlichen.sh) - hier wird nur verborgen. */
body.page-password-recover footer.footer,
body.page-password-change footer.footer {
	display: none;
}

/* Telefon: engere Karte, kleinere Ueberschrift - wie blackowl.cc es macht. */
@media (max-width: 480px) {
	body.page-password-recover > .container,
	body.page-password-change > .container {
		padding: 32px 20px 24px;
	}
	body.page-password-recover h2.h2,
	body.page-password-change h2.h2 {
		font-size: 22px;
	}
	body.page-password-recover > .container::before,
	body.page-password-change > .container::before {
		width: 170px;
		height: 113px;
	}
}