/* --- Kalkulátorok.
       EGY stílus mind a nyolcra. Korábban mindegyik a saját oldalszerkesztő-
       beállításait viselte, ezért nyolcféleképpen néztek ki. Itt csak a téma
       tokenjei szerepelnek, hardcode-olt szín és méret nincs: ha a paletta
       változik, ezek is vele mozdulnak. --- */

.ag-calc {
	display: grid;
	gap: var(--space-5);
	max-width: 34rem;
	margin-block: var(--space-8);
	padding: var(--space-6);
	font-family: var(--font-sans-ui);
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
}

.ag-calc__fields {
	display: grid;
	gap: var(--space-5);
}

.ag-calc__field {
	display: grid;
	gap: 6px;
}

.ag-calc__label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-body);
}

.ag-calc__input {
	width: 100%;
	/* 44 px tapintási magasság: ez az a méret, amit ujjal biztosan el lehet
	   találni, és a mezők mobilon a lap fő interakciója. A padding és a
	   betűméret együtt adja ki, ezért a min-height csak a biztosíték. */
	min-height: 44px;
	padding: 10px 12px;
	/* 16 px: ennél kisebb betűnél az iOS ránagyít a mezőre fókuszáláskor, és a
	   lap elcsúszik az olvasó alatt. */
	font: inherit;
	font-size: 16px;
	color: var(--text-body);
	background: var(--surface-page);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
}

.ag-calc__input:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 1px;
	border-color: var(--focus-ring);
}

.ag-calc__note {
	margin: 0;
	font-size: var(--text-xs);
	line-height: 1.5;
	color: var(--text-secondary);
}

/* --- Választók (mértékegység, felhasználási mód) --- */

.ag-calc__choice {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: 0;
	border: 0;
}

.ag-calc__legend {
	padding: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-body);
}

.ag-calc__radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* A címke is tapintható felület legyen, ne csak a pötty maga. */
	min-height: 44px;
	font-size: var(--text-sm);
	color: var(--text-body);
	cursor: pointer;
}

.ag-calc__radio input {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
}

/* --- Eredmény --- */

.ag-calc__result {
	margin: 0;
	padding: var(--space-4);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	color: var(--accent-hover);
	background: var(--surface-accent-soft);
	border-radius: var(--radius-card);
}

/* A "kell hozzá JavaScript" sor CSAK addig látszik, amíg a szkript el nem
   indult. Ha fut, a JS ráteszi a --ready osztályt, és a sor eltűnik. Így a
   figyelmeztetés akkor van ott, amikor igaz. */
.ag-calc__fallback {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--text-secondary);
}

.ag-calc--ready .ag-calc__fallback { display: none; }

@media (min-width: 600px) {
	/* Az átváltóknál a két mező egymás mellett fér el, és így látszik, hogy
	   egyetlen érték két alakja, nem két külön kérdés. */
	.ag-calc[data-ag-calc-factor] .ag-calc__fields {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-4);
	}
}