/* Ziemia na rozdrożu – kalkulatory: karta wyniku, formularz, grupy huba, strona kalkulatora.
   PLIK GENEROWANY przez narzedzia/css/zbuduj-css.py z ziemia-claude-design/design-system – nie edytuj ręcznie.
   Poprawki motywu: zasoby/css/motyw.css. */
/* ---------- Karta wyniku kalkulatora ---------- */
.zr-result { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-32); background: var(--card-bg, var(--color-card)); color: var(--color-ink); }
.zr-result--sticky { position: sticky; top: calc(var(--header-height-compact) + var(--space-24)); }
.zr-result__label { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--color-ink-muted); }
.zr-result__value { margin-top: var(--space-8); font-variant-numeric: tabular-nums; }
.zr-result__empty { margin-top: var(--space-8); color: var(--color-ink-muted); font-size: 15px; line-height: 22px; }
.zr-result__sub { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); padding-top: var(--space-24); border-top: var(--stroke-hairline) solid var(--color-line); }
.zr-result__sub dt { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--color-ink-muted); }
.zr-result__sub dd { margin-top: 4px; font-family: var(--font-sans); font-weight: 600; font-size: 26px; line-height: 32px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.zr-result__sub small { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
.zr-chart { display: flex; flex-direction: column; gap: 10px; }
.zr-chart__title { font-size: 15px; line-height: 20px; font-weight: 600; margin-bottom: 4px; }
.zr-chart__row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 76px; align-items: center; gap: 12px; font-size: 13px; line-height: 18px; }
.zr-chart__name { color: var(--color-ink); }
.zr-chart__track { height: 14px; }
.zr-chart__bar { display: block; height: 100%; width: var(--w, 50%); background: var(--color-primary); border-radius: 0 4px 4px 0; }
.zr-chart__value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.zr-chart__row.is-selected .zr-chart__bar { background: var(--color-accent); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.zr-chart__row.is-selected .zr-chart__name { font-weight: 600; }
.zr-chart__row.is-selected .zr-chart__name::after { content: " · wybrane"; font-weight: 500; color: var(--color-ink-muted); }
.zr-result__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; padding-top: var(--space-24); border-top: var(--stroke-hairline) solid var(--color-line); }
.zr-result__note { font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
.zr-result.is-empty .zr-result__sub dd, .zr-result.is-empty .zr-chart { opacity: .5; }
/* Mobile: przyklejony dolny pasek z kosztem rocznym */
.zr-result-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 12px var(--page-margin-mobile); background: var(--color-band-dark); color: var(--color-on-dark); box-shadow: var(--shadow-subtle); }
.zr-result-bar__label { font-size: 13px; line-height: 18px; color: var(--color-band-dark-muted); }
.zr-result-bar__value { font-family: var(--font-sans); font-weight: 600; font-size: 26px; line-height: 32px; letter-spacing: -0.01em; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.zr-result-bar--fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; }

/* Karta wyniku na mobile (< 768 px): przyklejony dolny pasek z kosztem rocznym,
   pełna karta rozwijana od dołu. Karta: zr-result--collapsible, otwarta: .is-open. */
@media (min-width: 768px) { .zr-result-bar--fixed { display: none; } }
@media (max-width: 767px) {
  .zr-result--sticky { position: static; }
  .zr-result--collapsible { display: none; }
  .zr-result--collapsible.is-open { display: flex; position: fixed; left: 0; right: 0; bottom: 74px; z-index: 41; max-height: calc(100vh - 160px); overflow-y: auto; border-radius: var(--radius-leaf-lg) var(--radius-leaf-sm) 0 0; box-shadow: var(--shadow-subtle); }
  body:has(.zr-result-bar--fixed) { padding-bottom: 74px; }
}

/* ---------- Karta formularza kalkulatora ---------- */
.zr-form-card { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-32); background: var(--card-bg, var(--color-card)); }
.zr-form-card > h2:not(:first-child), .zr-form-card > h3:not(:first-child) { padding-top: var(--space-24); border-top: var(--stroke-hairline) solid var(--color-line); }
.zr-formula { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 28px; margin-bottom: var(--space-8); }
.zr-formula sub { font-size: 14px; }
.zr-legend { list-style: none; padding: 0; margin: var(--space-8) 0 var(--space-16); display: grid; gap: 6px; }
.zr-legend li { position: relative; padding-left: 18px; }
.zr-legend li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--color-primary); }
@media (max-width: 767px) { .zr-form-card, .zr-result { padding: var(--space-24) var(--space-16); } }

/* Grupy kalkulatorów. Każda grupa zajmuje cały rząd; grupa z 1–2 widocznymi kartami (zr-calc-group--small,
   --span = liczba kart) zajmuje tyle kolumn, ile ma kart, więc sąsiednie małe grupy stają obok siebie w jednym rzędzie. */
.zr-calc-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-64) var(--grid-gutter); }
.zr-calc-group { grid-column: 1 / -1; min-width: 0; padding-top: var(--space-32); border-top: var(--stroke-hairline) solid var(--color-line); }
.zr-calc-group--small { grid-column: span var(--span, 1); display: flex; flex-direction: column; }
.zr-calc-group--small .zr-calc-group__grid { flex: 1 1 auto; }   /* karty małych grup w jednym rzędzie mają równą wysokość */
/* Nagłówek grupy: ikona | nazwa (może się złamać) | licznik po prawej */
.zr-calc-group__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-16); row-gap: 2px; margin-bottom: var(--space-24); }
.zr-calc-group__head .zr-card-g__icon { margin: 0; }
.zr-calc-group__head .t-meta { color: var(--color-ink-muted); white-space: nowrap; }
.zr-calc-group__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tile-gap); }
.zr-calc-group--small .zr-calc-group__grid { grid-template-columns: repeat(var(--span, 1), minmax(0, 1fr)); }
/* W małej grupie licznik stoi pod nazwą, żeby nagłówki sąsiednich małych grup miały tę samą wysokość */
.zr-calc-group--small .zr-calc-group__head .zr-card-g__icon { grid-row: 1 / span 2; }
.zr-calc-group--small .zr-calc-group__head h2, .zr-calc-group--small .zr-calc-group__head .t-meta { grid-column: 2 / -1; }
/* Duża grupa (ponad 8 kart): 8 kart i przycisk „Pokaż więcej (n)” / „Pokaż mniej” (aria-expanded, aria-controls) */
.zr-calc-group__more { display: flex; justify-content: center; margin-top: var(--space-32); }
@media (min-width: 768px) and (max-width: 1023px) {
  .zr-calc-groups, .zr-calc-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .zr-calc-groups { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-48); }
  .zr-calc-group--small { grid-column: 1 / -1; }
  .zr-calc-group--small .zr-calc-group__head .zr-card-g__icon { grid-row: auto; }
  .zr-calc-group--small .zr-calc-group__head h2 { grid-column: 2; }
  .zr-calc-group--small .zr-calc-group__head .t-meta { grid-column: 3; grid-row: 1; }
  .zr-calc-group__grid, .zr-calc-group--small .zr-calc-group__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .zr-calc-group__more .zr-btn { width: 100%; }
  /* Karta G w wierszu: ikona 40 px po lewej, nazwa i opis; etykieta grupy i „Oblicz” zbędne pod nagłówkiem grupy */
  .zr-calc-group .zr-card-g { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-16); row-gap: 4px; align-content: start; padding: var(--space-16); }
  .zr-calc-group .zr-card-g > * { grid-column: 2; }
  .zr-calc-group .zr-card-g .zr-card-g__icon { grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; }
  .zr-calc-group .zr-card-g .zr-card-g__icon svg { width: 20px; height: 20px; }
  .zr-calc-group .zr-card-g .zr-badge { position: static; justify-self: start; }
  .zr-calc-group .zr-card-g h3 { font-size: 16px; line-height: 22px; }
  .zr-calc-group .zr-card-g .zr-card-g__desc { font-size: 14px; line-height: 20px; }
  .zr-calc-group .zr-card-g .zr-card-g__foot { display: none; }
}

/* ==================== Strona kalkulatora ==================== */
/* Kolejność: nagłówek (zr-calc-head) → część robocza na band-light (formularz + KartaWyniku) → zr-calc-page:
   poradnik (zr-calc-article) → „Jak liczymy” → FAQ → powiązane kalkulatory → powiązane artykuły → zastrzeżenie. */
.zr-calc-head { padding: var(--space-32) 0 var(--space-48); }
.zr-calc-head__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: var(--space-32); max-width: 760px; }
.zr-calc-head__intro .t-lead { color: var(--color-ink-muted); }
.zr-calc-page { display: flex; flex-direction: column; gap: 80px; }

/* Poradnik: kolumna tekstu 680 px; przy dłuższym tekście (4+ śródtytuły) spis treści — przyklejony obok na desktopie, zwijany nad tekstem poniżej 1024 px */
.zr-calc-article { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
.zr-calc-article__toc { grid-column: span 3; align-self: stretch; padding-top: 112px; }
.zr-calc-article__main { grid-column: span 9; display: flex; flex-direction: column; align-items: flex-start; padding-left: var(--space-24); min-width: 0; }
.zr-calc-article--no-toc .zr-calc-article__main { grid-column: 1 / span 9; padding-left: 0; }
.zr-calc-article__main > * { width: 100%; max-width: 680px; }
.zr-calc-article__kicker { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-ink-muted); }
.zr-calc-article__main > h2 { margin-top: var(--space-8); }
.zr-calc-article__meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-24); row-gap: var(--space-8); margin-top: var(--space-16); }
.zr-calc-article__toc-m { display: none; margin-top: var(--space-32); }
.zr-calc-article .zr-prose { margin-top: var(--space-40); }
/* Śródtytuły poradnika to H3 (tytuł poradnika jest H2), ale wyglądają jak śródtytuły artykułu */
.zr-prose--nested > h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 30px; margin-top: var(--space-48); scroll-margin-top: 96px; }
.zr-prose--nested > h3 + * { margin-top: var(--space-16); }
.zr-prose > p.zr-prose__lead { font-size: 20px; line-height: 32px; color: var(--color-ink); }
/* Ilustracja w tekście: schemat na beżowej płaszczyźnie z podpisem */
.zr-figure { margin: 0; }
.zr-figure__art { padding: var(--space-24); background: var(--color-card); border-radius: var(--radius-leaf-lg) var(--radius-leaf-sm) var(--radius-leaf-lg) var(--radius-leaf-sm); }
.zr-figure__art svg { display: block; width: 100%; height: auto; }
.zr-figure .zr-caption { margin-top: var(--space-8); }
.zr-figure__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.zr-figure__panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.zr-figure__panel svg { max-width: 260px; }
.zr-figure__label { font-size: 15px; line-height: 20px; font-weight: 600; }
.zr-figure__art text { font-family: var(--font-sans); font-size: 16px; fill: var(--color-ink); }
.zr-figure__art polygon { stroke: var(--color-primary); stroke-width: 1.5; stroke-linejoin: round; }
.zr-fig-1 { fill: var(--color-band-light); }
.zr-fig-2 { fill: var(--color-surface); }
.zr-fig-3 { fill: var(--color-line); }
/* Powiązane kalkulatory: 4 karty G od 1024 px, niżej przewijane w poziomie (zr-scroller--tablet) */
@media (min-width: 1024px) { .zr-calc-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tile-gap); } }
/* KartaWyniku: podpowiedź pod wynikiem pomocniczym (np. od progu objętości „Praktyczniej zamówić beton z betoniarni” pod liczbą worków)
   — wstawka w tonie --card-inset z linkiem do sekcji poradnika; pojawia się tylko, gdy warunek jest spełniony */
.zr-result__tip { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: calc(-1 * var(--space-8)); padding: var(--space-16) var(--space-16) var(--space-8); border-radius: var(--radius-leaf-sm); background: var(--card-inset, var(--color-surface)); font-size: 15px; line-height: 22px; color: var(--color-ink); }
.zr-result__tip b { font-weight: 600; }
.zr-result__tip .zr-link-more { white-space: normal; }
/* Przełącznik segmentowy z krótkimi etykietami (2–3 opcje, do ok. 10 znaków, np. Płyta / Ława / Słup): na mobile zostaje w jednym rzędzie */
@media (max-width: 767px) {
  .zr-segmented--row { flex-direction: row; flex-wrap: nowrap; border-radius: var(--radius-pill); }
  .zr-segmented--row label { flex: 1 1 0; min-width: 0; }
  .zr-segmented--row span { padding: 0 8px; }
}
.zr-calc-disclaimer { display: flex; align-items: flex-start; gap: 12px; padding-top: var(--space-24); border-top: var(--stroke-hairline) solid var(--color-line); color: var(--color-ink-muted); }
@media (max-width: 1023px) {
  .zr-calc-article__toc { display: none; }
  .zr-calc-article__main, .zr-calc-article--no-toc .zr-calc-article__main { grid-column: 1 / -1; padding-left: 0; }
  .zr-calc-article__toc-m { display: block; }
}
@media (max-width: 767px) {
  .zr-calc-head { padding: var(--space-24) 0 var(--space-32); }
  .zr-calc-head__intro { margin-top: var(--space-24); }
  .zr-calc-head .zr-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .zr-calc-head .zr-meta > * + *::before { content: none; }
  .zr-calc-page { gap: 56px; }
  .zr-prose--nested > h3 { font-size: 20px; line-height: 26px; margin-top: var(--space-40); }
  .zr-prose > p.zr-prose__lead { font-size: 18px; line-height: 29px; }
  .zr-calc-article .zr-prose { margin-top: var(--space-32); }
  .zr-figure__art { padding: var(--space-16); }
  .zr-figure__panels { grid-template-columns: minmax(0, 1fr); }
  .zr-figure__panel svg { max-width: 240px; }
}
/* ==================== koniec: strona kalkulatora ==================== */