/*
 * Stylesheet der Konto-Seiten.
 *
 * Eigenständig und ohne Abhängigkeit zu einem Theme-Stylesheet: Das Plugin
 * kann nicht wissen, was ein Konsument mitbringt, und ein Kontobereich, der
 * ohne fremdes CSS unbenutzbar aussieht, wäre kein brauchbarer Baustein.
 *
 * ANPASSUNG DURCH KONSUMENTEN: ausschliesslich ueber die Custom Properties im
 * :root-Block unten. Ein Skin ueberschreibt Variablen, keine Selektoren --
 * dann bleibt er auch nach einem Update dieses Plugins heil. Beispiel:
 *
 *   wp_enqueue_style( 'mein-skin', …, array( 'hm-user-account' ), MEINE_VERSION );
 *
 *   :root { --hm-user-primary: #0f5c63; --hm-user-radius-lg: 4px; }
 *
 * Jede Variable zeigt zuerst auf ein --wp--preset--*, das ein Block-Theme aus
 * seiner theme.json liefert, und faellt sonst auf einen neutralen Wert zurueck.
 * Damit fuegt sich der Kontobereich in einem Block-Theme von selbst ein.
 */

:root {
	/* Farben */
	--hm-user-primary: var(--wp--preset--color--primary, #2b6a71);
	--hm-user-primary-hover: var(--wp--preset--color--primary-hover, #1f4f55);
	--hm-user-ink: var(--wp--preset--color--foreground, #14262a);
	--hm-user-text: var(--wp--preset--color--contrast, #2c3c40);
	--hm-user-text-secondary: var(--wp--preset--color--contrast-2, #5a6a6e);
	--hm-user-text-meta: var(--wp--preset--color--contrast-3, #7c8a8d);
	--hm-user-paper: var(--wp--preset--color--base, #fff);
	--hm-user-page-bg: var(--wp--preset--color--base-2, #f5f6f5);
	--hm-user-accent: var(--wp--preset--color--accent, #b4553a);

	/*
	 * Die Gefahrenfarbe. Sie traegt "Konto loeschen" flaechig, den Abmelden-
	 * Knopf als Schrift und den Streifen an Fehlermeldungen -- ist also trotz
	 * des Namens --hm-user-accent nie eine Markenfarbe gewesen. Wer den Namen
	 * woertlich nahm und seine Akzentfarbe daraufsetzte, bekam einen
	 * Loeschen-Knopf in der Markenfarbe. Deshalb dieser Name, der sagt, wofuer
	 * die Farbe da ist; --hm-user-accent bleibt der Rueckfall, damit
	 * bestehende Skins unveraendert weiterwirken.
	 */
	--hm-user-danger: var(--hm-user-accent);

	/*
	 * Schrift auf gefuellten Flaechen. Als eigene Tokens, weil eine feste
	 * Farbe hier durch keine Variable mehr zu retten waere: Sobald ein
	 * Konsument eine helle Markenfarbe setzt, ist weisse Beschriftung darauf
	 * nicht mehr lesbar -- und ein Skin darf nur Variablen ueberschreiben,
	 * keine Selektoren. Die Vorgaben sind genau das bisherige Verhalten.
	 */
	--hm-user-on-primary: #fff;
	--hm-user-on-danger: #fff;

	/* Rahmen */
	--hm-user-border-card: rgba(20, 38, 42, 0.08);
	--hm-user-border-hairline: rgba(20, 38, 42, 0.12);
	--hm-user-border-input: rgba(20, 38, 42, 0.16);

	/* Meldungen. Absichtlich eigene Werte statt Status-Farben eines Themes:
	   Fehler und Erfolg muessen auch dann unterscheidbar bleiben, wenn ein
	   Konsument nur seine Markenfarbe setzt. */
	--hm-user-error-bg: #f3e0d7;
	--hm-user-error-text: #8e3a1e;
	--hm-user-success-bg: #d5e6e4;
	--hm-user-success-text: #0f5c63;
	--hm-user-info-bg: #f6e7cc;
	--hm-user-info-text: #8a5f14;
	--hm-user-info-line: #e9a23b;

	/* Radius und Schatten */
	--hm-user-radius-sm: var(--wp--custom--radius--sm, 12px);
	--hm-user-radius-md: var(--wp--custom--radius--md, 14px);
	--hm-user-radius-lg: var(--wp--custom--radius--lg, 18px);
	--hm-user-shadow-panel: var(--wp--custom--shadow--panel, 0 24px 60px -30px rgba(20, 38, 42, 0.45), 0 0 0 1px rgba(20, 38, 42, 0.08));

	/* Schriften. Ohne Theme-Vorgabe bewusst inherit, damit nichts gegen die
	   Typografie des Konsumenten arbeitet. */
	--hm-user-font-heading: var(--wp--preset--font-family--heading, inherit);
	--hm-user-font-body: var(--wp--preset--font-family--body, inherit);
	--hm-user-font-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
}

/* ==========================================================================
   Primitiven: Icons, Buttons, Felder
   ========================================================================== */

.hm-user-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.hm-user-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--hm-user-radius-sm);
	font-family: var(--hm-user-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.hm-user-btn-cta {
	height: 52px;
	padding: 0 26px;
	font-size: 15px;
	font-weight: 700;
}

.hm-user-btn-primary {
	background: var(--hm-user-primary);
	color: var(--hm-user-on-primary);
}

.hm-user-btn-primary:hover {
	background: var(--hm-user-primary-hover);
	color: var(--hm-user-on-primary);
}

.hm-user-btn-accent {
	background: var(--hm-user-error-bg);
	color: var(--hm-user-danger);
}

.hm-user-btn-accent:hover {
	opacity: 0.85;
}

/*
 * Fuer den einen wirklich unwiderruflichen Schritt (Konto loeschen). Bewusst
 * flaechig statt wie -accent nur getoent: Er soll sich vom "Abmelden" darueber
 * deutlich unterscheiden, damit niemand den falschen davon trifft.
 */
.hm-user-btn-danger {
	background: var(--hm-user-danger);
	color: var(--hm-user-on-danger);
}

.hm-user-btn-danger:hover {
	background: var(--hm-user-error-text);
	color: var(--hm-user-on-danger);
}

.hm-user-btn-outline {
	background: transparent;
	border-color: var(--hm-user-border-input);
	color: var(--hm-user-ink);
}

.hm-user-btn-outline:hover {
	background: var(--hm-user-page-bg);
}

.hm-user-btn:focus-visible {
	outline: 2px solid var(--hm-user-primary);
	outline-offset: 2px;
}

/* Muss hinter der generischen Regel stehen: gleiche Spezifitaet, es gewinnt
   die spaetere. Davor waere sie wirkungslos. */
.hm-user-btn-danger:focus-visible {
	outline-color: var(--hm-user-danger);
}

.hm-user-btn .hm-user-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/*
 * Ladezustand, gesetzt von assets/js/form-busy.js, solange eine Anfrage laeuft.
 * .hm-user-btn ist bereits inline-flex mit gap -- der Spinner rutscht als
 * Pseudoelement ohne jeden Markup-Eingriff vor die Beschriftung, und
 * currentColor deckt alle Button-Varianten ohne Extra-Regeln ab.
 */
.hm-user-btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

.hm-user-btn.is-busy::before {
	content: "";
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: hm-user-spin 0.6s linear infinite;
}

/*
 * Wartezustand vor dem Absenden: Turnstile hat sein Token noch nicht geliefert.
 *
 * Bewusst ein anderes Bild als der Spinner. Beides ist Warten, aber auf
 * Verschiedenes -- sonst waere der Uebergang "Pruefung fertig, Anfrage geht
 * raus" unsichtbar, und genau der ist die Rueckmeldung an den Besucher. Der
 * Schluessel kommt als Maske herein statt als Bild, damit ihn currentColor
 * einfaerbt und er in jeder Button-Variante ohne eigene Regel passt.
 */
.hm-user-btn.is-checking::before {
	content: "";
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../icons/key.svg") no-repeat center / contain;
	mask: url("../icons/key.svg") no-repeat center / contain;
	transform-origin: 29% 71%; /* Der Ring des Schluessels, nicht die Kastenmitte. */
	animation: hm-user-key-rock 1.1s ease-in-out infinite;
}

/* Der Spinner tritt an die Stelle des Icons, statt daneben zu treten. Beide
   sind exakt 16px, es verschiebt sich also nichts. */
.hm-user-btn.is-busy .hm-user-icon,
.hm-user-btn.is-checking .hm-user-icon {
	display: none;
}

@keyframes hm-user-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Hin und her statt durchlaufend -- schon aus dem Augenwinkel vom Spinner zu
   unterscheiden, und es liest sich als "Schluessel wird gedreht". */
@keyframes hm-user-key-rock {
	0%,
	100% {
		transform: rotate(-14deg);
	}

	50% {
		transform: rotate(14deg);
	}
}

/* Nur verlangsamen, nicht abschalten: Der Zustand muss "laeuft" bleiben. Beim
   Schluessel zusaetzlich der kleinere Ausschlag -- ein langsames weites
   Schwenken waere unruhiger als ein schnelles kurzes. */
@media (prefers-reduced-motion: reduce) {
	.hm-user-btn.is-busy::before {
		animation-duration: 2s;
	}

	.hm-user-btn.is-checking::before {
		animation-name: hm-user-key-rock-reduced;
		animation-duration: 2.4s;
	}

	@keyframes hm-user-key-rock-reduced {
		0%,
		100% {
			transform: rotate(-5deg);
		}

		50% {
			transform: rotate(5deg);
		}
	}
}

.hm-user-input {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 50px;
	padding: 9px 14px;
	border: 1px solid var(--hm-user-border-input);
	border-radius: var(--hm-user-radius-sm);
	background: var(--hm-user-paper);
	color: var(--hm-user-text);
	font-family: var(--hm-user-font-body);
	font-size: 0.95em;
}

.hm-user-input:focus {
	outline: 2px solid var(--hm-user-primary);
	outline-offset: 1px;
	border-color: transparent;
}

.hm-user-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

/*
 * Sichtbarkeitsschalter im Passwortfeld. Wrapper und Knopf entstehen erst in
 * password-toggle.js -- ohne JavaScript gibt es beide nicht, und dann greift
 * hier auch nichts davon.
 */
.hm-user-password {
	position: relative;
	display: block;
}

/* Platz fuer den Knopf, damit er nicht auf dem getippten Text sitzt. */
.hm-user-password .hm-user-input {
	padding-right: 48px;
}

.hm-user-password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var(--hm-user-radius-sm);
	background: transparent;
	color: var(--hm-user-text-meta);
	cursor: pointer;
}

.hm-user-password-toggle:hover {
	color: var(--hm-user-ink);
}

.hm-user-password-toggle:focus-visible {
	outline: 2px solid var(--hm-user-primary);
	outline-offset: -2px;
}

.hm-user-password-toggle svg {
	width: 20px;
	height: 20px;
}

.hm-user-field label {
	font-weight: 600;
	font-size: 0.9em;
	color: var(--hm-user-ink);
}

.hm-user-checkbox-field label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
}

.hm-user-checkbox-field input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Nutzereinstellungen (HM_User_Preferences)
   -------------------------------------------------------------------------- */

/*
 * Eine Auswahl steht in einem <fieldset>, damit Bezeichnung und Optionen auch
 * fuer Screenreader zusammengehoeren. Browser geben fieldset eigene Raender und
 * Innenabstaende -- die weg, den Abstand macht .hm-user-field.
 */
.hm-user-pref {
	min-width: 0;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.hm-user-pref-legend {
	padding: 0;
	font-weight: 600;
	font-size: 0.9em;
	color: var(--hm-user-ink);
}

/*
 * Die einzelnen Optionen sind Labels innerhalb von .hm-user-field und wuerden
 * von dort fett erben. Fett gehoert der Bezeichnung der Einstellung, nicht
 * jeder einzelnen Wahlmoeglichkeit -- sonst schreit die ganze Gruppe.
 */
.hm-user-pref-choice,
.hm-user-pref-check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	font-weight: 400;
}

.hm-user-field .hm-user-pref-choice,
.hm-user-field .hm-user-pref-check {
	font-weight: 400;
}

/*
 * flex-shrink verhindert, dass ein Bedienelement bei langer Beschriftung
 * gestaucht wird; die Mindesthoehe oben sorgt fuer eine Trefferflaeche, die
 * auch mit dem Daumen zu bedienen ist.
 */
.hm-user-pref-choice input[type="radio"],
.hm-user-pref-check input[type="checkbox"] {
	flex-shrink: 0;
	margin: 0;
}

/*
 * Gruppen fassen Einstellungen unter einer Ueberschrift zusammen -- auch dann,
 * wenn sie aus verschiedenen Plugins stammen. Fuer den Nutzer ist das eine
 * Sache; ein Rahmen drumherum wuerde eine Trennung behaupten, die es nicht gibt.
 */
.hm-user-pref-group {
	min-width: 0;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.hm-user-pref-group-legend {
	padding: 0 0 8px;
	font-weight: 600;
	font-size: 0.9em;
	color: var(--hm-user-ink);
}

/*
 * Die Einrueckung zeigt, worueber der Hauptschalter darueber gebietet. Nur ein
 * Innenabstand, keine Linie: Die Zugehoerigkeit steht ohnehin im Text.
 */
.hm-user-pref-child {
	margin-left: 26px;
}

/*
 * Ausgegraut heisst "wirkt gerade nicht, weil der Hauptschalter aus ist" --
 * nicht "gesperrt". Das Kaestchen bleibt bedienbar und behaelt seinen Wert; ein
 * Klick darauf schaltet den Hauptschalter wieder an. Gesetzt wird die Klasse
 * ausschliesslich vom Kaskaden-Skript; ohne JavaScript fehlt nur die
 * Ausgrauung, entschieden wird ohnehin serverseitig.
 */
.hm-user-pref-child.is-suppressed {
	opacity: 0.55;
}

/*
 * Eine Auswahl als Aufklappmenue -- fuer Listen, bei denen Radiofelder
 * umschlagen (die Zeitzonenwahl hat rund 420 Eintraege). Anders als eine
 * Radiogruppe ist das genau ein Bedienelement, steht also in einem <p> mit
 * <label> statt in einem <fieldset>.
 */
.hm-user-pref-select {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

/*
 * Das Aussehen eines Textfeldes bekommt das Auswahlfeld nicht von hier, sondern
 * ueber die Klasse .hm-user-input, die render_select() mit ausgibt. Zwei
 * Regelsaetze fuer dieselbe Optik laufen frueher oder spaeter auseinander, und
 * ein Skin, der .hm-user-input umschreibt, erwischte sonst nur die Haelfte.
 */

/*
 * Der Hinweis auf die vom Browser erkannte Zeitzone. Er entsteht
 * ausschliesslich im Skript und ist ohne JavaScript schlicht nicht da -- kein
 * per CSS verstecktes Element, das jemand faelschlich fuer fehlend haelt.
 */
.hm-user-pref-detected {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: 0.85em;
	color: var(--hm-user-text-secondary);
}

/*
 * Ein Link-artiger Knopf, keine Schaltflaeche: Das Uebernehmen fuellt nur das
 * Feld darueber aus und speichert nichts. Saehe es aus wie der Absendeknopf,
 * wuerde genau das erwartet.
 */
.hm-user-pref-detected button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--hm-user-primary);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.hm-user-pref-detected button:focus-visible {
	outline: 2px solid var(--hm-user-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Konto-Karte und Meldungen
   ========================================================================== */

.hm-user-account-card {
	max-width: 480px;
	padding: 28px;
	background: var(--hm-user-paper);
	border: 1px solid var(--hm-user-border-card);
	border-radius: var(--hm-user-radius-lg);
	box-shadow: var(--hm-user-shadow-panel);
}

/* ==========================================================================
   Anmeldeseite: die beiden Erweiterungspunkte
   ========================================================================== */

/*
 * Beide Bereiche entstehen nur, wenn ein Konsument an 'hm_user_login_aside'
 * bzw. 'hm_user_login_after' etwas haengt -- ohne Callback rendert das PHP sie
 * gar nicht. Deshalb braucht hier nichts einen Leerfall abzufangen.
 *
 * Die Struktur steht bewusst hier und nicht beim Konsumenten: Ein Skin darf
 * nur Variablen ueberschreiben, keine Selektoren. Zweispaltigkeit laesst sich
 * so nicht nachruesten -- sie muss aus diesem Stylesheet kommen.
 */
.hm-user-login-split {
	max-width: 880px;
}

@media (min-width: 782px) {
	.hm-user-login-split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		align-items: start;
	}
}

/*
 * Unter dem Umbruchpunkt steht die Markenflaeche ueber dem Formular. Bewusst
 * mit Abstand darunter statt mit Trennlinie: Auf einem schmalen Schirm ist sie
 * eine Einleitung, kein zweiter Abschnitt.
 */
.hm-user-login-aside {
	margin-bottom: 24px;
}

@media (min-width: 782px) {
	.hm-user-login-aside {
		margin-bottom: 0;
	}
}

.hm-user-login-extra {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--hm-user-border-hairline);
}

.hm-user-account-notice {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: var(--hm-user-radius-sm);
	border-left: 3px solid;
	font-size: 0.92em;
	font-weight: 600;
}

.hm-user-account-notice-error {
	background: var(--hm-user-error-bg);
	border-left-color: var(--hm-user-danger);
	color: var(--hm-user-error-text);
}

.hm-user-account-notice-success {
	background: var(--hm-user-success-bg);
	border-left-color: var(--hm-user-primary);
	color: var(--hm-user-success-text);
}

.hm-user-account-notice-info {
	background: var(--hm-user-info-bg);
	border-left-color: var(--hm-user-info-line);
	color: var(--hm-user-info-text);
}

.hm-user-account-form .hm-user-btn-cta {
	width: 100%;
}

.hm-user-account-hint {
	font-size: 0.85em;
	color: var(--hm-user-text-secondary);
	font-weight: 400;
}

/*
 * Trennt im gemeinsamen Kontoformular den Namensteil vom optionalen
 * Passwortteil -- eine reine Lesehilfe, damit die Passwortfelder nicht wie
 * Pflichtangaben zum Namen wirken.
 */
.hm-user-account-separator {
	height: 0;
	margin: 20px 0;
	border: 0;
	border-top: 1px solid var(--hm-user-border-hairline);
}

.hm-user-account-heading {
	margin: 0 0 12px;
	font-family: var(--hm-user-font-heading);
	font-size: 1.25em;
	color: var(--hm-user-ink);
}

.hm-user-account-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 20px;
	font-size: 0.9em;
	font-weight: 600;
}

.hm-user-account-links a {
	color: var(--hm-user-primary);
	text-decoration: none;
}

.hm-user-account-links a:hover {
	text-decoration: underline;
}

/* Trennt das "Bestaetigungslink erneut senden"-Formular vom Anmeldeformular. */
.hm-user-account-resend {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--hm-user-border-hairline);
}

.hm-user-login-notice {
	max-width: 480px;
}

/* ==========================================================================
   Profil
   ========================================================================== */

/*
 * Profilkopf: Avatar mit Initialen, Name und E-Mail-Adresse. Kein Foto-Upload
 * vorgesehen -- die Initialen kommen aus dem Anzeigenamen (siehe initials() in
 * HM_User_Account_Forms).
 */
.hm-user-profile-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.hm-user-profile-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--hm-user-success-bg);
	color: var(--hm-user-success-text);
	font-family: var(--hm-user-font-heading);
	font-size: 17px;
	font-weight: 700;
}

.hm-user-profile-identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hm-user-profile-name {
	font-family: var(--hm-user-font-heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--hm-user-ink);
}

.hm-user-profile-email {
	font-family: var(--hm-user-font-mono);
	font-size: 11px;
	color: var(--hm-user-text-meta);
	overflow-wrap: anywhere;
}

/* Kompaktes Menue unter dem Profilkopf. */
.hm-user-profile-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px;
	margin-bottom: 20px;
	background: var(--hm-user-page-bg);
	border-radius: var(--hm-user-radius-md);
}

.hm-user-profile-menu-toggle > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 10px;
	border-radius: var(--hm-user-radius-sm);
	font-family: var(--hm-user-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--hm-user-text);
	cursor: pointer;
	list-style: none;
}

.hm-user-profile-menu-toggle > summary::-webkit-details-marker {
	display: none;
}

.hm-user-profile-menu-toggle > summary:hover {
	background: var(--hm-user-paper);
}

.hm-user-profile-menu-chevron {
	margin-left: auto;
	color: var(--hm-user-text-meta);
	transition: transform 0.15s ease;
}

.hm-user-profile-menu-toggle[open] > summary .hm-user-profile-menu-chevron {
	transform: rotate(180deg);
}

.hm-user-profile-menu-form {
	padding: 4px 10px 12px;
}

/*
 * Die Wege aus dem Profil heraus stehen in voller Breite untereinander.
 * display: flex statt des von .hm-user-btn vererbten inline-flex: Zwei
 * Inline-Boxen mit width: 100% haetten zwischen sich noch eine Zeile aus dem
 * Whitespace des Markups und damit eine Luecke, die von der Zeilenhoehe
 * abhaengt statt vom Abstand hier.
 */
.hm-user-profile-admin,
.hm-user-profile-logout {
	display: flex;
	width: 100%;
	margin-top: 20px;
}

/*
 * Der Weg zur Loeschung ist absichtlich ein zurueckhaltender Textlink unter dem
 * Abmelden-Button und kein Button: Er soll auffindbar sein, aber niemanden
 * einladen, ihn im Vorbeigehen zu treffen. Der flaechige Danger-Button steht
 * erst in der Bestaetigungsansicht dahinter.
 */
.hm-user-account-danger {
	margin-top: 20px;
	text-align: center;
	font-size: 0.85em;
}

.hm-user-account-danger a {
	color: var(--hm-user-text-meta);
	text-decoration: underline;
}

.hm-user-account-danger a:hover {
	color: var(--hm-user-danger);
}

/* ==========================================================================
   Erweiterungspunkt: Abschnitte der Konsumenten
   ========================================================================== */

/*
 * Empfohlenes Markup fuer Callbacks an 'hm_user_account_sections'. Native
 * <details>/<summary> statt eines eigenen JS-Toggles: funktioniert ohne
 * JavaScript identisch und braucht keinen zusaetzlichen Zustand.
 */
.hm-user-account-section {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--hm-user-border-hairline);
}

.hm-user-account-section > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	font-family: var(--hm-user-font-heading);
	font-size: 1.1em;
	font-weight: 600;
	color: var(--hm-user-ink);
}

.hm-user-account-section > summary::-webkit-details-marker {
	display: none;
}

.hm-user-account-section > summary .hm-user-icon {
	margin-left: auto;
	color: var(--hm-user-text-meta);
	transition: transform 0.15s ease;
}

.hm-user-account-section[open] > summary .hm-user-icon {
	transform: rotate(180deg);
}

.hm-user-account-section > summary + * {
	margin-top: 16px;
}

/* ==========================================================================
   Bot-Schutz und Noscript
   ========================================================================== */

/* Cloudflare rendert das Widget in einem iframe fester Breite (300px);
   der Abstand sorgt dafuer, dass es nicht am Absenden-Button klebt. */
.hm-user-turnstile {
	margin-bottom: 16px;
}

/* Hinweis, wenn nach einer Weile kein Token kam -- ein Blocker, das Netz weg
   oder eine sichtbare Challenge, die noch offen ist. Eingeblendet von
   assets/js/form-busy.js, der Text kommt uebersetzt aus
   HM_User_Turnstile::widget(). Die eigene display-Regel ist Absicherung gegen
   Themes, die p mit einem eigenen display versehen und damit das
   hidden-Attribut aushebeln wuerden. */
.hm-user-turnstile-hint[hidden] {
	display: none;
}

/* Dieselbe Optik wie der Noscript-Hinweis: derselbe Anlass (die Spam-Pruefung
   kommt nicht zustande), also auch dasselbe Bild. */
.hm-user-turnstile-hint,
.hm-user-noscript-notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--hm-user-radius-sm);
	border-left: 3px solid var(--hm-user-info-line);
	background: var(--hm-user-info-bg);
	color: var(--hm-user-info-text);
	font-size: 0.92em;
}