/*
 * Maßeinheiten-Rechner – Stylesheet
 *
 * Wichtig:
 * - Alle Selektoren sind auf ".mer-calc" (und Nachfahren) begrenzt.
 * - Es werden KEINE globalen Selektoren (body, input, button, h1 ...) verwendet.
 * - Es wird KEINE eigene Schriftart geladen; die Typografie des aktiven
 *   Themes wird per "inherit" bzw. "font: inherit" übernommen.
 * - Farbsystem: zwei Hauptfarben (--mer-color-primary / --mer-color-primary-contrast)
 *   plus neutrale Grautöne, als CSS-Variablen im Container-Scope definiert,
 *   damit sie nicht mit Theme-Variablen kollidieren.
 */

.mer-calc {
	/* Zwei Hauptfarben */
	--mer-color-primary: #3452ff;
	--mer-color-primary-contrast: #ffffff;

	/* Neutrale Grautöne */
	--mer-color-text: #1f2328;
	--mer-color-text-muted: #5b6470;
	--mer-color-border: #e2e5e9;
	--mer-color-border-strong: #c7ccd3;
	--mer-color-bg: #ffffff;
	--mer-color-bg-subtle: #f7f8f9;
	--mer-color-disabled: #9aa1a9;
	--mer-color-error: #b3261e;
	--mer-color-error-bg: #fdecea;

	--mer-radius: 8px;
	--mer-space-1: 4px;
	--mer-space-2: 8px;
	--mer-space-3: 16px;
	--mer-space-4: 24px;

	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding: var(--mer-space-4);
	background: var(--mer-color-bg);
	border: 1px solid var(--mer-color-border);
	border-radius: var(--mer-radius);

	/* Typografie: bewusst NICHT festgelegt — Übernahme vom Theme */
	color: var(--mer-color-text);
	line-height: 1.5;
}

.mer-calc *,
.mer-calc *::before,
.mer-calc *::after {
	box-sizing: border-box;
}

.mer-calc__title {
	margin: 0 0 var(--mer-space-4) 0;
	font-size: 1.25em;
	font-weight: 600;
	font-family: inherit;
	color: var(--mer-color-text);
}

.mer-calc__form {
	display: flex;
	flex-direction: column;
	gap: var(--mer-space-3);
}

.mer-calc__row {
	display: flex;
	gap: var(--mer-space-3);
	flex-wrap: wrap;
}

.mer-calc__row--main .mer-calc__field:first-child {
	flex: 2 1 220px;
}

.mer-calc__row--main .mer-calc__field:last-child {
	flex: 1 1 180px;
}

.mer-calc__row--params .mer-calc__field {
	flex: 1 1 220px;
}

.mer-calc__field {
	display: flex;
	flex-direction: column;
	gap: var(--mer-space-1);
	min-width: 0;
}

.mer-calc__label {
	font-size: 0.875em;
	font-weight: 500;
	font-family: inherit;
	color: var(--mer-color-text);
}

.mer-calc__input,
.mer-calc__select {
	width: 100%;
	font: inherit;
	color: var(--mer-color-text);
	background-color: var(--mer-color-bg);
	border: 1px solid var(--mer-color-border-strong);
	border-radius: var(--mer-radius);
	padding: 10px 12px;
	min-height: 44px; /* touch target */
	appearance: auto;
}

.mer-calc__input:focus-visible,
.mer-calc__select:focus-visible,
.mer-calc__button:focus-visible {
	outline: 2px solid var(--mer-color-primary);
	outline-offset: 2px;
}

.mer-calc__input[aria-invalid="true"] {
	border-color: var(--mer-color-error);
	background-color: var(--mer-color-error-bg);
}

.mer-calc__error {
	margin: 0;
	font-size: 0.8125em;
	color: var(--mer-color-error);
}

.mer-calc__error[hidden] {
	display: none;
}

.mer-calc__row--actions {
	justify-content: flex-end;
}

.mer-calc__button {
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	border-radius: var(--mer-radius);
	padding: 10px 18px;
	min-height: 44px;
	border: 1px solid var(--mer-color-border-strong);
	background-color: var(--mer-color-bg-subtle);
	color: var(--mer-color-text);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mer-calc__button:hover {
	background-color: var(--mer-color-border);
}

.mer-calc__button--reset {
	color: var(--mer-color-text-muted);
}

.mer-calc__results {
	margin-top: var(--mer-space-4);
	padding-top: var(--mer-space-4);
	border-top: 1px solid var(--mer-color-border);
}

.mer-calc__results-title {
	margin: 0 0 var(--mer-space-3) 0;
	font-size: 1em;
	font-weight: 600;
	font-family: inherit;
	color: var(--mer-color-text);
}

.mer-calc__results-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mer-space-2) var(--mer-space-3);
}

.mer-calc__result {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mer-space-2);
	padding: 10px 12px;
	background-color: var(--mer-color-bg-subtle);
	border: 1px solid var(--mer-color-border);
	border-radius: var(--mer-radius);
}

.mer-calc__result-label {
	font-size: 0.875em;
	color: var(--mer-color-text-muted);
}

.mer-calc__result-value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--mer-color-text);
}

/* Zustand: aktuell nicht berechenbar (kein Wert / fehlende Parameter) */
.mer-calc__result[data-state="empty"] .mer-calc__result-value,
.mer-calc__result[data-state="unavailable"] .mer-calc__result-value {
	color: var(--mer-color-disabled);
	font-weight: 400;
}

/* Zustand: aktive Eingabe-Einheit wird nicht als "Ergebnis" hervorgehoben,
   sondern dezent markiert, ohne sich ausschließlich auf Farbe zu verlassen. */
.mer-calc__result[data-state="source"] {
	border-color: var(--mer-color-primary);
	border-width: 1px;
}

.mer-calc__result[data-state="source"] .mer-calc__result-label::after {
	content: " (Eingabe)";
	font-style: italic;
}

.mer-calc__hint {
	margin: var(--mer-space-3) 0 0 0;
	font-size: 0.8125em;
	color: var(--mer-color-text-muted);
}

.mer-calc__hint[hidden] {
	display: none;
}

/* Responsive: Smartphones */
@media (max-width: 480px) {
	.mer-calc {
		padding: var(--mer-space-3);
	}
	/*
	.mer-calc__row {
		flex-direction: column;
	}
	*/
	.mer-calc__results-list {
		grid-template-columns: 1fr;
	}

	.mer-calc__row--actions {
		justify-content: stretch;
	}

	.mer-calc__row--actions .mer-calc__button {
		width: 100%;
	}
}


/* @media (max-width: 480px) {
	.mer-calc__row--main .mer-calc__field:first-child {
		flex: 10px;
	}
}*/


/* Reduzierte Bewegung berücksichtigen */
@media (prefers-reduced-motion: reduce) {
	.mer-calc__button {
		transition: none;
	}
}