/* ===== Porovnanie poplatku za odpad — doplnok k styles.css =====
   Samostatný súbor zámerne: stránka petície sa týmto nedotýka, takže zmena
   kalkulačky nikdy nevynúti prebitie ?v= na styles.css ani script.js.

   ZDIEĽANÝ SÚBOR — beží na ziarniejeskladka.sk aj na kuban2026.sk a na kampaňový
   web sa kopíruje bajt za bajtom (kuban2026/tools/sync-kalkulacka.sh). Upravuje sa
   výhradne tu, v repozitári ziarniejeskladka. */

/* Farby dát (pruhy, legenda, zvýraznenia) sú pripnuté na triedu .kal-tema, ktorú
   nesie <main>. Dôvod: výplň pruhov je natímovaná ako atribút rect/@fill priamo
   v HTML aj v kalkulacka.js, takže legenda musí sedieť s tými istými hodnotami
   na oboch weboch — kampaňový web má inú paletu a tieto premenné v :root nemá.
   Ostatné tokeny (--line, --ink, --muted, --bg-soft*, --radius*, --shadow) sa
   zámerne NEpripínajú — tými sa komponent prispôsobí paléte hostiteľského webu. */
.kal-tema {
  --green-800: #11392c;
  --green-700: #1b5341;
  --green-600: #2a7a5f;
  --accent: #e2653a;
  --accent-dark: #c74f27;
  --red: #9c2420;
  --red-soft: #fbeeec;
}

.kal-uvod { max-width: 72ch; }

/* ---- vstupy ---- */

.kal-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  margin: 0 0 12px;
}
.kal-form[hidden] { display: none; }
.kal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.kal-field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: .98rem; }
.kal-field .kal-hint { display: block; color: var(--muted); font-size: .86rem; margin: 6px 0 0; }

.kal-field input[type="text"] {
  width: 100%;
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
.kal-field input:focus { border-color: var(--green-600); outline: none; box-shadow: 0 0 0 3px rgba(42,122,95,.15); }

.kal-stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; }
.kal-stepper input { text-align: center; }
.kal-stepper button {
  font: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1;
  cursor: pointer; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft2); color: var(--green-800);
}
.kal-stepper button:hover { background: var(--bg-soft); border-color: var(--green-600); }

/* ---- prepínač obdobia ---- */

/* Zámerne bez :has() — pilulka je <span> vnútri <label>, takže stačí
   susedný selektor a prepínač vyzerá rovnako aj v starších mobilných
   prehliadačoch, ktoré :has() nepoznajú. */
.kal-obdobie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 22px 0 0; }
.kal-obdobie[hidden] { display: none; }
.kal-obdobie-popis { font-weight: 700; font-size: .98rem; margin-right: 6px; }
.kal-pill { display: inline-flex; cursor: pointer; }
.kal-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kal-pill span {
  padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--line);
  font-weight: 600; font-size: .94rem; color: var(--muted);
}
.kal-pill input:checked + span { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.kal-pill input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- zhrnutie ---- */

.kal-zhrnutie {
  background: var(--bg-soft2);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  margin: 0 0 34px;
}
.kal-zhrnutie[hidden] { display: none; }
.kal-zhrnutie p { margin: 0 0 8px; }
.kal-zhrnutie p:last-child { margin-bottom: 0; }
.kal-zhrnutie-hlavne { font-size: 1.06rem; }
.kal-zhrnutie-hlavne strong { color: var(--green-800); }
.kal-zhrnutie-vedlajsie { color: var(--muted); font-size: .95rem; }

/* ---- graf ---- */

ul.kal-graf { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 22px; }
.kal-row { display: grid; gap: 6px; }
.kal-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.kal-row-label { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.kal-row-value {
  font-weight: 800; font-size: 1.02rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--green-800);
}
.kal-row-note { margin: 2px 0 0; color: var(--muted); font-size: .88rem; max-width: 76ch; }

/* Pruh: šírku nastavuje JS cez rect/@width (0–100), preto preserveAspectRatio="none".
   Výška aj zaoblenie sú tu, nie v SVG — rx by sa pri nerovnomernom škálovaní
   roztiahlo do oválu. */
.kal-bar {
  display: block; width: 100%; height: 22px;
  border-radius: 4px; overflow: hidden;
  background: var(--bg-soft2);
}

.kal-row--vy .kal-row-label { color: var(--accent-dark); }
.kal-row--vy .kal-row-value { color: var(--accent-dark); }
.kal-row--ziar .kal-row-value { color: var(--red); }

.kal-hviezda {
  font-weight: 800; color: var(--accent-dark); text-decoration: none;
  padding: 0 2px; font-size: 1.05em;
}
.kal-hviezda:hover { text-decoration: none; }

ul.kal-legenda { list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.kal-legenda li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .92rem; }
.kal-legenda .kal-vzorka { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.kal-legenda .kal-vzorka-vy { background: var(--accent); }
.kal-legenda .kal-vzorka-ziar { background: var(--red); }
.kal-legenda .kal-vzorka-mesto { background: var(--green-600); }

/* ---- metodika ---- */

.kal-metodika {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 860px;
}
.kal-metodika h2 { margin-top: 0; }
.kal-metodika ol { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.kal-metodika li { color: var(--ink); }
.kal-metodika li strong { color: var(--green-800); }

/* Metodika ako poznámka pod čiarou. Klient ju chce na spodku a drobným písmom,
   preto je celý blok potlačený — menšie písmo než bežný text, tlmená farba,
   bez výraznej výplne. Obsah sa tým nemení, len jeho váha na stránke.
   Rieši sa triedou, nie inline štýlmi, aby to sedelo aj na kampaňovom webe,
   ktorý má vlastnú paletu a tento súbor dostáva bajt za bajtom. */
.kal-metodika--pozn {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 22px 0 0;
  margin-top: 48px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
}
.kal-metodika-nadpis {
  margin: 0 0 12px;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
}
.kal-metodika--pozn ol { gap: 10px; padding-left: 20px; }
.kal-metodika--pozn li { color: inherit; }
.kal-metodika--pozn li strong { color: inherit; font-weight: 700; }
/* Hviezdička pri troch hodnotách v grafe skáče na prvú položku tohto zoznamu;
   odsadenie, aby ju po skoku neschovala hlavička. */
.kal-metodika--pozn li[id] { scroll-margin-top: 90px; }
.kal-metodika--pozn .kal-sukromie {
  margin-top: 18px; padding-top: 14px; font-size: inherit; color: inherit;
}

.kal-varovanie {
  background: var(--red-soft);
  border: 1px solid rgba(156, 36, 32, .28);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 0 0 20px;
}
.kal-varovanie p { margin: 0; }
.kal-varovanie strong { color: var(--red); }

.kal-sukromie {
  margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .92rem; max-width: 76ch;
}

@media (max-width: 760px) {
  .kal-form { padding: 20px; }
  .kal-form-grid { grid-template-columns: 1fr; gap: 20px; }
  .kal-metodika { padding: 22px; }
  .kal-metodika--pozn { padding: 20px 0 0; margin-top: 36px; }
  .kal-row-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kal-row-value { font-size: 1.1rem; }
  .kal-legenda { gap: 6px 18px; }
}