/* ==========================================================================
   UI PROGRESS · components/ui-progress.css
   Child-Theme: generatepress-child/assets/css/components/
   ---------------------------------------------------------------------
   STAND 14.09.26 - Aus eigenständigem mp_progress-Snippet integriert
   (vorher eigener wp_head-Inline-<style>-Block, lief unabhängig von
   jeder anderen Komponente - gleiches Muster wie beim mp_toggle-Fix).

   .mp-progress statt .ui-progress: kein natives HTML-Element als
   Gegenstück (anders als Button/Input), deshalb kein Dual-Layer nötig -
   gleiche Namenslogik wie .mp-card/.mp-alert/.mp-stepper.

   KEIN @layer (siehe ui-button.css für die Begründung).

   Konsumiert AUSSCHLIESSLICH Tokens aus mp-tokens.css (muss vorher
   geladen sein). Die Fallback-Hex-Werte aus der Ursprungsversion sind
   entfernt - u. a. war var(--mp-primary, #2563eb) schlicht falsch
   (echtes --mp-primary ist #951D40, nicht Blau) und die Tokens sind
   ohnehin immer geladen, keine Fallback-Notwendigkeit wie z. B. bei
   --mp-primary-tint-icon in ui-card.css.

   NEU ggü. Ursprungsversion: Farbvarianten (--success/--warning/--error)
   für Fälle, in denen die Füllfarbe den Fortschritt selbst kommunizieren
   soll (z. B. "Profil-Vollständigkeit kritisch niedrig" in Rot), nicht
   nur Primary. Optional, Standard bleibt Primary.

   Global geladen (nicht an Shortcode/Wrapper gebunden).
   ========================================================================== */

.mp-progress {
	display: flex;
	flex-direction: column;
	gap: var(--mp-space-2);
}

.mp-progress__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--mp-font-body);
	font-size: var(--mp-fs-caption);
	line-height: var(--mp-lh-caption);
	color: var(--mp-ink-500);
}

.mp-progress__track {
	width: 100%;
	height: var(--mp-space-2); /* 8px, Standardgröße */
	border-radius: var(--mp-radius-sm);
	background: var(--mp-ink-100);
	overflow: hidden;
}
/* Kompakt, z. B. in einer Liste/Card statt als eigenständiges Element */
.mp-progress--sm .mp-progress__track {
	height: var(--mp-space-1); /* 4px */
}

.mp-progress__fill {
	height: 100%;
	border-radius: var(--mp-radius-sm);
	background: var(--mp-primary);
	/* KORREKTUR (14.09.26, 6): .6s war immer noch zu kurz, um als
	   bewusstes "Aufziehen" statt als kurzes Zucken wahrgenommen zu
	   werden - 1.2s mit sanftem Ein-/Ausschwingen (ease-in-out statt
	   schnellem Start) macht die Bewegung deutlich lesbar. */
	transition: width 1.2s ease-in-out;
}

/* ---- Farbvarianten - NUR die Füllfarbe ändert sich, Track/Meta
   bleiben immer neutral (Ink-100/Ink-500), damit der Balken auch bei
   Rot/Grün nicht zu bunt/unruhig wirkt. Modifier sitzt auf .mp-progress
   selbst, nicht auf __fill, damit später ggf. weitere Elemente (z. B.
   ein Warn-Icon in __meta) mitreagieren könnten. ---- */
.mp-progress--success .mp-progress__fill { background: var(--mp-success); }
.mp-progress--warning .mp-progress__fill { background: var(--mp-warning); }
.mp-progress--error   .mp-progress__fill { background: var(--mp-error); }