/* Strona pojedynczego kalkulatora (kalkulator.html.twig). Laduje autoAsset()
   PO build.css, wiec nadpisuje .kalkulator* z main.css bez przebudowy CSS.

   ODSTEPY 10 PX Z KAZDEJ STRONY (daro, 19.09.2026): ramka pola, ramka
   przycisku i blok wyniku maja rowno 10 px gora/boki/dol. Do tej pory
   `.pole` bralo styl POLA TEKSTOWEGO z main.css (padding 0 12px, min-height
   44px) — etykieta siedziala 16 px od krawedzi, a przycisk kleil sie do
   lewej i gornej krawedzi ramki. */

.kalkulator { padding: 10px; }

.kalkulator .pole {
  display: block;
  min-height: 0;
  padding: 10px;
}
/* Ramka-opakowanie nie jest polem: nie reaguje na najechanie jak input. */
.kalkulator .pole:hover { border-color: var(--obramowanie-pole); }

.kalkulator__pola {
  gap: 10px;
  margin-bottom: 10px;
}

.kalkulator__wynik { padding: 10px; }

.kalkulator__dodatkowe {
  margin-top: 10px;
  padding-top: 10px;
}

/* Wzor z podstawionymi liczbami pod wynikiem: „(4 + 5 + 3 + 5 + 4) ÷ 5 = 21 ÷ 5 = 4,20".
   pre-line: kazdy krok (linia z adaptera) w osobnym wierszu; anywhere: dlugie
   sumy lamia sie na 375 px zamiast rozpychac karte. */
.kalkulator__obliczenie {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tekst);
  font-variant-numeric: tabular-nums;
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-align: center;
}

.kalkulator__obliczenie-etykieta {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst2);
}

/* Wzor ogolny (symbole) nad podstawieniem: szary, mniejszy; kroki z liczbami
   wieksze i ciemne — tak czyta sie „podstaw pod wzor i rozwiaz". */
.kalkulator__obliczenie-wzor {
  display: block;
  font-size: 14px;
  color: var(--tekst2);
}
.kalkulator__obliczenie-wzor[hidden] { display: none; }

.kalkulator__obliczenie-kroki {
  display: block;
  font-size: 17px;
  font-weight: 500;
}