/* KREDITKALK1 (owner 13. 10. 2026) — kalkulačka kreditov na /studio/pricing (lib/kalk/render.ts, static/ds/kalk.js).
   Tmavý blok (soil + zrno), biely text; tokeny len z tokens.css. Čísla dopĺňa kalk.js — miesto pre ne je vyhradené (bez skoku). */
.gg-kalk { --kk-line: rgb(var(--on-dark-rgb) / .16); --kk-fill: rgb(var(--on-dark-rgb) / .06); background: var(--grain-layer), var(--soil); color: var(--on-dark-muted); border-radius: calc(var(--r-card) + 8px); padding: clamp(20px, 4vw, 48px); display: grid; gap: clamp(20px, 3vw, 32px); margin-top: 16px; min-width: 0; }
.gg-kalk :where(h2, h3, h4, b, strong, label, output) { color: var(--on-dark); }
.gg-kalk__head { display: grid; gap: 10px; max-width: 46em; }
.gg-kalk__head .gg-eyebrow { color: var(--mint); }
.gg-kalk__head :where(h2, h3) { margin: 0; font-size: var(--fs-h3, clamp(26px, 20px + 1.6vw, 40px)); letter-spacing: var(--track-head); line-height: 1.05; }
.gg-kalk__head p { margin: 0; color: var(--on-dark-muted); font-size: var(--fs-small); }
.gg-kalk__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .gg-kalk__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.gg-kalk__card { min-width: 0; background: var(--kk-fill); border: 1px solid var(--kk-line); border-radius: var(--r-card); padding: clamp(16px, 2.4vw, 26px); display: grid; gap: 14px; align-content: start; }
.gg-kalk__card :where(h3, h4) { margin: 0; font: 650 19px/1.2 var(--font); letter-spacing: -.02em; }
.gg-kalk__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gg-kalk__chip { min-height: 44px; min-width: 72px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(var(--on-dark-rgb) / .4); background: transparent; color: var(--on-dark); font: 600 15px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--t-fast, .15s), color var(--t-fast, .15s), border-color var(--t-fast, .15s); }
.gg-kalk__chip:hover { border-color: var(--on-dark); }
.gg-kalk__chip[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: var(--soil); }
.gg-kalk__chip:focus-visible, .gg-kalk__step button:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.gg-kalk__chip[hidden], .gg-kalk__list li[hidden] { display: none; }
.gg-kalk__list { list-style: none; margin: 0; padding: 0; display: grid; }
.gg-kalk__list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--kk-line); }
.gg-kalk__fit li { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; border: 1px solid transparent; border-top-color: var(--kk-line); border-radius: 0; }
.gg-kalk__t { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-small); }
.gg-kalk__t small { color: var(--on-dark-muted); font-size: var(--fs-caption); min-height: 1.3em; }
.gg-kalk__n { font: 650 clamp(20px, 16px + 1vw, 26px)/1 var(--font); letter-spacing: -.02em; color: var(--sun); font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch; white-space: nowrap; }
.gg-kalk__dot { width: 12px; height: 12px; border-radius: 3px; }
.gg-kalk__dot--design { background: var(--mint); }
.gg-kalk__dot--plant { background: var(--larch-mist); }
.gg-kalk__dot--chat { background: var(--on-dark-muted); }
.gg-kalk__dot--photo { background: var(--sun); }
.gg-kalk__note { margin: 0; font-size: var(--fs-caption); color: var(--on-dark-muted); min-height: 1.3em; }
.gg-kalk__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.gg-kalk__f { display: grid; gap: 6px; min-width: 0; align-content: end; }
.gg-kalk__f label { font: 600 var(--fs-caption)/1.25 var(--font); color: var(--on-dark); }
.gg-kalk__step { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: stretch; min-height: 48px; border: 1px solid rgb(var(--on-dark-rgb) / .32); border-radius: var(--r-ctl); overflow: hidden; background: rgb(var(--on-dark-rgb) / .04); }
.gg-kalk__step:focus-within { border-color: var(--sun); }
.gg-kalk__step button { border: 0; background: transparent; color: var(--on-dark); font: 500 22px/1 var(--font); cursor: pointer; padding: 0; }
.gg-kalk__step button:hover { background: rgb(var(--on-dark-rgb) / .1); }
.gg-kalk__step input { min-width: 0; width: 100%; border: 0; background: transparent; color: var(--on-dark); font: 650 17px/1.2 var(--font); font-variant-numeric: tabular-nums; text-align: center; padding: 0 4px; -moz-appearance: textfield; appearance: textfield; }
.gg-kalk__step input:focus { outline: none; }
.gg-kalk__step input::-webkit-outer-spin-button, .gg-kalk__step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gg-kalk__need { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-ctl); background: rgb(var(--on-dark-rgb) / .1); }
.gg-kalk__need > span { font-size: var(--fs-small); color: var(--on-dark-muted); }
.gg-kalk__need output { font: 650 clamp(30px, 22px + 2vw, 44px)/1.05 var(--font); letter-spacing: -.03em; color: var(--sun); font-variant-numeric: tabular-nums; min-height: 1.05em; }
.gg-kalk__need small { font-size: var(--fs-caption); color: var(--on-dark-muted); min-height: 1.3em; }
.gg-kalk__lab { margin: 4px 0 0; font: 650 15px/1.2 var(--font); color: var(--on-dark); }
.gg-kalk__st { font: 600 var(--fs-caption)/1.25 var(--font); font-style: normal; text-align: right; max-width: 15em; }
.gg-kalk__fit .is-yes .gg-kalk__st { color: var(--mint); }
.gg-kalk__fit .is-maybe .gg-kalk__st { color: var(--sun); }
.gg-kalk__fit .is-no .gg-kalk__st, .gg-kalk__fit .is-lock .gg-kalk__st { color: var(--on-dark-muted); }
.gg-kalk__fit .is-best { border-color: var(--sun); border-radius: var(--r-ctl); background: rgb(var(--on-dark-rgb) / .06); }
.gg-kalk__fit .is-best + li { border-top-color: transparent; }
.gg-kalk__card > .gg-btn { justify-self: start; }
.gg-kalk__err { margin: 0; padding: 12px 16px; border-radius: var(--r-ctl); background: rgb(var(--on-dark-rgb) / .1); color: var(--sun); font-size: var(--fs-small); }
.gg-kalk__err[hidden] { display: none; }
.gg-kalk:not(.is-ready) .gg-kalk__v { visibility: hidden; }
.gg-kalk__v { display: inline-block; min-width: 2ch; }
.gg-kalk button:disabled { cursor: default; opacity: .5; }
@media (max-width: 559px) { .gg-kalk__card > .gg-btn { justify-self: stretch; } }
@media (max-width: 359px) { .gg-kalk__fields { grid-template-columns: minmax(0, 1fr); } }
/* WEBVIZ198 (TMAVYTEXT1: na tmavom vždy svetlý text): stránky dávajú h2/h3/p vlastnú tmavú farbu so špecifickosťou 0,1,1
   (.ka-svc h2/h3/p v ka-pages.css, .gg-ds :where(h…) v tokens.css) a tá prebila nadpisy aj poznámky bloku (WEBCHECK197 N1).
   Preto farby textu bloku so špecifickosťou ≥ 0,2,0 — nezávisle od poradia štýlov a od stránky, na ktorej blok je. */
.gg-kalk.gg-kalk :is(h2, h3, h4) { color: var(--on-dark); }
.gg-kalk .gg-kalk__head p, .gg-kalk .gg-kalk__note, .gg-kalk .gg-kalk__t small, .gg-kalk .gg-kalk__need > span, .gg-kalk .gg-kalk__need small { color: var(--on-dark-muted); }
.gg-kalk .gg-kalk__lab, .gg-kalk .gg-kalk__t b, .gg-kalk .gg-kalk__f label { color: var(--on-dark); }
.gg-kalk .gg-kalk__err { color: var(--sun); }
/* stránka konceptu A (SK+EN): blok nasleduje hneď za sekciou „Koľko stojí jeden krok“ — bez druhej veľkej medzery */
.ka-kalk-sec { padding-top: 0; }
.ka-kalk-sec .gg-kalk { margin-top: 0; }