/* =====================================================================
   Kalkulačky · společný vizuální systém (prefix tk-)
   NÁVRH KE SCHVÁLENÍ. Nic z tohoto souboru není na webu.

   Barvy, písma, zaoblení, stíny a pohyb jsou převzaté ze stylu webu
   (tokeny --ftz-* ve stylopisu obchodu). Nové jsou jen komponenty
   kalkulaček; hodnoty, které ještě nikdo neschválil, nesou DOČASNÉ.
   Žádné logo ani název značky – jen styl obchodu.

   Podpis sekce: teplotní stupnice jako na měřicím přístroji
   (chlad – komfort – horko). Hlavní kalkulačky stojí pod jejími
   polovinami, ostatní jsou seřazené podle ní.

   Izolace od Shoptetu (šablona Waltz):
   · každý selektor začíná .tk-hub, .tk-calculator nebo .tk-box;
   · žádný globální selektor (body, h2, p, a, input, button, table…);
   · všechno, co šablona nastavuje sama (písmo 14 px v řezu 300,
     výchozí vzhled polí a tlačítek prohlížeče, okraje odstavců,
     barva odkazů z „primární barvy"), se tu nastavuje výslovně —
     specificita aspoň 0,2,0 přebije šablonové „.content p" (0,1,1).
   ===================================================================== */

.tk-calculator,
.tk-hub,
.tk-info {
  /* ── barvy webu (stejné hodnoty jako --ftz-* ve stylopisu obchodu) ── */
  --tk-cold: #7FB3CC;        /* chladný pól – jen plochy a kresba */
  --tk-cold-ink: #1F5A75;    /* chladná pro text, 7,4 : 1 na kosti */
  --tk-warm: #FF8A4C;        /* teplý pól, hlavní tlačítko */
  --tk-warm-ink: #B14A18;    /* teplá pro text, 5,3 : 1 na kosti */
  --tk-ember: #F0A868;       /* teplá na tmavém */
  --tk-glacier: #8FCEDD;     /* chladná na tmavém */
  --tk-paper: #F5F2ED;       /* plocha obchodu */
  --tk-bone: #FFFCF8;        /* plocha karty */
  --tk-slate: #1C2024;       /* tmavá plocha (úvod, výsledek) */
  --tk-graphite: #1C1B1A;    /* nadpisy a čísla */
  --tk-body: #413D39;        /* běžný text */
  --tk-stone: #544D46;       /* nápovědy, popisky – nejsvětlejší šedá */
  --tk-rule: #E0D9CE;        /* vlásky a rámečky */
  --tk-line: #333B42;        /* vlásky na tmavém */
  --tk-dim: #C6CDD3;         /* text na tmavém */
  --tk-ok: #1F6B49;
  --tk-warn: #8F5411;
  --tk-error: #A33A22;
  --tk-neutral: #6F675F;     /* střed osy */
  --tk-axis: linear-gradient(90deg, var(--tk-cold), var(--tk-neutral) 46%,
             var(--tk-neutral) 54%, var(--tk-warm));
  --tk-axis-dark: linear-gradient(90deg, var(--tk-glacier), #4A5259 46%,
                  #4A5259 54%, var(--tk-ember));

  /* ── písma: načítá je stylopis webu, tady jsou jen rodiny ── */
  --tk-font-ui: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --tk-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --tk-font-data: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* ── mezery (stupnice webu 4–48 px) ── */
  --tk-s1: 4px; --tk-s2: 8px; --tk-s3: 12px; --tk-s4: 16px;
  --tk-s5: 24px; --tk-s6: 32px; --tk-s7: 48px;

  /* ── zaoblení, stíny, pohyb (styl webu) ── */
  --tk-r-s: 4px; --tk-r-m: 8px; --tk-r-l: 14px; --tk-r-pill: 999px;
  --tk-shadow-1: 0 1px 2px rgba(28,27,26,.05), 0 1px 3px rgba(28,27,26,.04);
  --tk-shadow-2: 0 2px 4px rgba(28,27,26,.06), 0 8px 20px -6px rgba(28,27,26,.10);
  --tk-shadow-3: 0 3px 6px rgba(28,27,26,.07), 0 18px 40px -12px rgba(28,27,26,.16);
  --tk-ring: 0 0 0 3px rgba(255,138,76,.45);
  --tk-t-fast: 120ms; --tk-t: 180ms; --tk-t-slow: 280ms;
  --tk-ease: cubic-bezier(.2,.7,.3,1);

  /* ── přístupnost (DOČASNÉ – ke schválení) ──
     Oranžový prstenec sám má proti kartě jen asi 1,5 : 1, proto fokus
     dostane ještě tmavý obrys v teplé barvě pro text (5,3 : 1). */
  --tk-focus: 0 0 0 2px var(--tk-bone), 0 0 0 4px var(--tk-warm-ink);
  --tk-focus-field: 0 0 0 1px var(--tk-warm-ink), 0 0 0 4px rgba(255,138,76,.30);
  --tk-field-line: #8A8178;  /* obrys pole, 3,7 : 1 na kosti (WCAG 1.4.11) */
  --tk-track: #737C85;       /* neutrální část škály na tmavém, 3,9 : 1 */

  /* ── rozměry komponent (DOČASNÉ – ke schválení) ── */
  --tk-max: 932px;           /* obsahový sloupec Shoptetu (naměřeno) */
  --tk-field-h: 48px;        /* výška pole – dotykový cíl ≥ 44 px */
  --tk-pole-pos: 50%;        /* poloha značky na ose (nastavuje data-tk-pole) */
  --tk-pol-ink: var(--tk-warm-ink); /* inkoust pólu kalkulačky (chlad níž) */

  box-sizing: border-box;
  font-family: var(--tk-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tk-body);
  text-align: left;
  letter-spacing: normal;
  -webkit-text-size-adjust: 100%;
}
.tk-calculator *,
.tk-calculator *::before,
.tk-calculator *::after,
.tk-hub *,
.tk-hub *::before,
.tk-hub *::after,
.tk-info *,
.tk-info *::before,
.tk-info *::after { box-sizing: border-box }

/* Pojistka proti obecným pravidlům šablony („.content p", „li", „h2"):
   textové prvky uvnitř kalkulaček dědí písmo a barvu jen od nich.
   Specificita 0,1,1 – pravidla s vlastní třídou tk- (0,2,0) ji přebijí. */
.tk-calculator p, .tk-calculator li, .tk-calculator label,
.tk-calculator span, .tk-calculator h2, .tk-calculator h3,
.tk-hub p, .tk-hub li, .tk-hub span,
.tk-hub h1, .tk-hub h2, .tk-hub h3,
.tk-info p, .tk-info li, .tk-info span,
.tk-info h2, .tk-info h3 {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  line-height: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; text-align: inherit;
}
/* Šablony dávají položkám seznamu position:relative – tady stejně
   výslovně, ať je jedno, jestli to šablona udělá. */
.tk-calculator li, .tk-hub li, .tk-info li { position: relative }

/* Poloha na teplotní ose: jedna stupnice, pět kalkulaček. */
.tk-calculator[data-tk-pole="cold"], .tk-calculator[data-tk-pole="cool"] {
  --tk-pol-ink: var(--tk-cold-ink);
  --tk-focus-field: 0 0 0 1px var(--tk-cold-ink), 0 0 0 4px rgba(127,179,204,.35);
}
.tk-calculator[data-tk-pole="cold"], .tk-box[data-tk-pole="cold"] { --tk-pole-pos: 12% }
.tk-calculator[data-tk-pole="cool"], .tk-box[data-tk-pole="cool"] { --tk-pole-pos: 28% }
.tk-calculator[data-tk-pole="warm"], .tk-box[data-tk-pole="warm"] { --tk-pole-pos: 72% }
.tk-calculator[data-tk-pole="hot"],  .tk-box[data-tk-pole="hot"]  { --tk-pole-pos: 88% }

/* Stupnice v malém: kde na ose chlad – horko kalkulačka stojí.
   Prázdný řádkový prvek – editor Shoptetu ho nesmaže. */
.tk-calculator .tk-axis,
.tk-hub .tk-axis {
  position: relative; display: inline-block; flex: 0 0 auto;
  width: 56px; height: 4px; border-radius: var(--tk-r-pill);
  background: var(--tk-axis); vertical-align: middle; letter-spacing: 0;
}
.tk-calculator .tk-axis::after,
.tk-hub .tk-axis::after {
  content: ""; position: absolute; top: 50%; left: var(--tk-pole-pos);
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--tk-bone); border: 2px solid var(--tk-graphite);
}

/* =====================================================================
   0 · ROZCESTNÍK
   Tmavý úvod jako tmavé pásy webu; dvě hlavní karty z něj vystupují.
   ===================================================================== */
/* Nahoře bez okraje: odsazení pod menu dává šablona (50 px), stejně jako
   na ostatních stránkách webu. Změřeno na živé /kalkulacka/ při 1280 px. */
.tk-hub { max-width: var(--tk-max); margin: 0 auto var(--tk-s6) }
.tk-hub .tk-hub__hero {
  position: relative; overflow: hidden; margin: 0;
  padding: 44px 20px 100px; color: var(--tk-dim);
  background:
    radial-gradient(55% 75% at 0% 100%, rgba(143,206,221,.13), transparent 70%),
    radial-gradient(55% 75% at 100% 100%, rgba(240,168,104,.15), transparent 70%),
    var(--tk-slate);
  border-radius: 18px;
}
@media (min-width: 640px) {
  .tk-hub .tk-hub__hero { padding: 64px 56px 116px }
}
.tk-hub .tk-hub__hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tk-axis-dark);
}
.tk-hub .tk-hub__eyebrow {
  margin: 0 0 var(--tk-s4); padding: 0;
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  line-height: 1.4; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tk-ember);
}
.tk-hub .tk-hub__title {
  margin: 0 0 var(--tk-s4); padding: 0; max-width: 17ch;
  font-family: var(--tk-font-display); font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: 'opsz' 96;
  font-size: clamp(32px, 5.8vw, 54px); line-height: 1.04;
  letter-spacing: -.025em; color: var(--tk-bone);
  text-transform: none; text-wrap: balance;
}
/* Slova „horko" a „chlad" v barvách svých konců stupnice. */
.tk-hub .tk-hub__hot { color: var(--tk-ember); letter-spacing: inherit }
.tk-hub .tk-hub__cold { color: var(--tk-glacier); letter-spacing: inherit }
.tk-hub .tk-hub__lead {
  margin: 0; max-width: 54ch; font-size: 17px; line-height: 1.6;
  color: var(--tk-dim); text-wrap: pretty;
}
.tk-hub .tk-hub__facts {
  display: flex; flex-wrap: wrap; gap: var(--tk-s2) var(--tk-s5);
  margin: var(--tk-s5) 0 0; padding: 0;
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  line-height: 1.4; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tk-dim);
}
.tk-hub .tk-hub__facts span { display: inline-flex; align-items: center; gap: var(--tk-s2); letter-spacing: inherit }
.tk-hub .tk-hub__facts span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tk-ember);
}

/* Stupnice: rysky po 2,5 %, delší po čtvrtinách, pod nimi osa. */
.tk-hub .tk-hub__scale {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end; margin: 40px 0 0; padding: 0 0 26px;
  font-family: var(--tk-font-data); font-size: 11.5px; font-weight: 500;
  line-height: 1.4; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tk-dim);
}
.tk-hub .tk-hub__scale span { letter-spacing: inherit }
.tk-hub .tk-hub__scale span:first-child { color: var(--tk-glacier) }
.tk-hub .tk-hub__scale span:last-child { color: var(--tk-ember); text-align: right }
.tk-hub .tk-hub__scale::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(198,205,211,.55) 0 1px, transparent 1px 25%) 0 0 / calc(100% - 1px) 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(198,205,211,.28) 0 1px, transparent 1px 2.5%) 0 6px / calc(100% - 1px) 6px no-repeat;
}
.tk-hub .tk-hub__scale::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  border-radius: var(--tk-r-pill); background: var(--tk-axis-dark);
}

/* Mřížka 2 + 2: nahoře dvě hlavní kalkulačky (chlad | horko), pod
   nimi dvě doplňkové stejně široké, takže sloupce lícují. „dense"
   vrací boxy do řádku, když se za některý vloží rozbalená kalkulačka. */
.tk-hub .tk-hub__grid {
  position: relative; display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: row dense; gap: var(--tk-s3);
  margin: -64px 0 0; padding: 0 var(--tk-s3);
}
@media (min-width: 640px) {
  .tk-hub .tk-hub__grid { margin-top: -72px; padding: 0 var(--tk-s5) }
}
.tk-hub .tk-box { grid-column: span 6 }
@media (min-width: 640px) {
  .tk-hub .tk-box { grid-column: span 3 }
}

.tk-hub .tk-box {
  position: relative; display: flex; flex-direction: column;
  gap: var(--tk-s2); min-width: 0; margin: 0; padding: 20px 20px 18px;
  background: var(--tk-bone); border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-l); box-shadow: var(--tk-shadow-1);
  transition: box-shadow var(--tk-t) var(--tk-ease),
              border-color var(--tk-t) var(--tk-ease),
              transform var(--tk-t) var(--tk-ease);
}
.tk-hub .tk-box--main {
  gap: var(--tk-s3); padding: 30px var(--tk-s5) 20px;
  box-shadow: var(--tk-shadow-3);
}
.tk-hub.tk-js .tk-box:hover {
  border-color: #CFC6B8; box-shadow: var(--tk-shadow-3); transform: translateY(-2px);
}
/* Horní hrana hlavní karty = její polovina stupnice nad ní. */
.tk-hub .tk-box--main::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px;
  height: var(--tk-r-l); border-radius: var(--tk-r-l) var(--tk-r-l) 0 0;
  background: var(--tk-axis) 0 0 / 200% 4px no-repeat;
}
.tk-hub .tk-box--main[data-tk-pole="hot"]::before,
.tk-hub .tk-box--main[data-tk-pole="warm"]::before { background-position: 100% 0 }
.tk-hub .tk-box--open,
.tk-hub.tk-js .tk-box--open:hover {
  border-color: var(--tk-graphite); box-shadow: var(--tk-shadow-2); transform: none;
}

.tk-hub .tk-box__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tk-s3); margin: 0 0 var(--tk-s1); padding: 0; min-height: 44px;
  font-size: 14px; line-height: 1.4; color: var(--tk-body);
}
/* Ikona tématu: kresba je maska, barvu dává currentColor. */
.tk-hub .tk-box__icon {
  position: relative; display: inline-block; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%; letter-spacing: 0;
  color: var(--tk-warm-ink); background: rgba(255,138,76,.12);
  border: 1px solid rgba(177,74,24,.16);
  transition: background var(--tk-t) var(--tk-ease), color var(--tk-t) var(--tk-ease),
              border-color var(--tk-t) var(--tk-ease);
}
.tk-hub .tk-box[data-tk-pole="cold"] .tk-box__icon,
.tk-hub .tk-box[data-tk-pole="cool"] .tk-box__icon {
  color: var(--tk-cold-ink); background: rgba(127,179,204,.16);
  border-color: rgba(31,90,117,.16);
}
.tk-hub .tk-box__icon::before {
  content: ""; position: absolute; inset: 11px; background: currentColor;
  -webkit-mask: var(--tk-ikona) center / contain no-repeat;
  mask: var(--tk-ikona) center / contain no-repeat;
}
.tk-hub .tk-box--main .tk-box__icon { width: 52px; height: 52px }
.tk-hub .tk-box--main .tk-box__icon::before { inset: 13px }
.tk-hub.tk-js .tk-box:hover .tk-box__icon {
  color: var(--tk-graphite); background: var(--tk-warm); border-color: transparent;
}
.tk-hub.tk-js .tk-box[data-tk-pole="cold"]:hover .tk-box__icon,
.tk-hub.tk-js .tk-box[data-tk-pole="cool"]:hover .tk-box__icon { background: var(--tk-cold) }
.tk-hub .tk-box[data-tk-key="heat"] { --tk-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M5.5 18.5l1.7-1.7M16.8 7.2l1.7-1.7'/%3E%3C/svg%3E") }
.tk-hub .tk-box[data-tk-key="cold"] { --tk-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8v18.4M4 7.4l16 9.2M4 16.6l16-9.2M9.7 4.6 12 6.8l2.3-2.2M9.7 19.4 12 17.2l2.3 2.2M4.4 10.4l3-.8-.8-3M19.6 13.6l-3 .8.8 3M4.4 13.6l3 .8-.8 3M19.6 10.4l-3-.8.8-3'/%3E%3C/svg%3E") }
.tk-hub .tk-box[data-tk-key="feel"] { --tk-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 13.7V5.3a2.2 2.2 0 0 1 4.4 0v8.4a4 4 0 1 1-4.4 0z'/%3E%3Cpath d='M8.5 9.5v7.6'/%3E%3Cpath d='M17.5 8.5s-3 3.4-3 5.6a3 3 0 0 0 6 0c0-2.2-3-5.6-3-5.6z'/%3E%3C/svg%3E") }
.tk-hub .tk-box[data-tk-key="risk"] { --tk-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 5.8v5.4c0 4.3 2.9 7.8 7 9.3 4.1-1.5 7-5 7-9.3V5.8L12 3z'/%3E%3Cpath d='M12 8.5v4.5M12 16.2v.3'/%3E%3C/svg%3E") }
.tk-hub .tk-box__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0; padding: 0;
  font-family: var(--tk-font-data); font-size: 11.5px; font-weight: 500;
  line-height: 1.4; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tk-stone);
}
.tk-hub .tk-box__title {
  margin: 2px 0 0; padding: 0;
  font-family: var(--tk-font-display); font-weight: 400;
  font-variation-settings: 'opsz' 36; font-size: 19px; line-height: 1.22;
  letter-spacing: -.01em; color: var(--tk-graphite);
  text-transform: none; text-wrap: balance;
}
.tk-hub .tk-box--main .tk-box__title { font-size: clamp(24px, 3vw, 30px); line-height: 1.12 }
/* Tlačítko je jen název; klikací je celá karta (natažená plocha). */
.tk-hub .tk-box__btn {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  width: auto; height: auto; min-height: 0; border-radius: 0; box-shadow: none;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left;
  text-transform: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.tk-hub .tk-box__btn::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: var(--tk-r-l);
}
.tk-hub .tk-box__btn:focus-visible { outline: none }
.tk-hub .tk-box__btn:focus-visible::after { box-shadow: var(--tk-focus) }
.tk-hub .tk-box__text {
  margin: 0; padding: 0; font-size: 15px; line-height: 1.6; color: var(--tk-stone);
  letter-spacing: .005em; text-wrap: pretty;
}
/* Pod nadpisem karty krátká osa značky (44 × 2 px) – tentýž prvek, jaký
   má web pod nadpisy sekcí. Podnadpis pod ní v tlumené šedé webu
   (#544D46, 7,4 : 1 na kosti), ne v plné černé nadpisu. */
.tk-hub .tk-box__text::before {
  content: ""; display: block; width: 44px; height: 2px; margin: 2px 0 12px;
  border-radius: 1px; background: var(--tk-axis);
}
.tk-hub .tk-box--main .tk-box__text { font-size: 15.5px }
/* Potřebné údaje: pás tří políček s ikonou, jako popisky na přístroji.
   Všechno na střed – tři stejná políčka, souměrně pod nadpisem pásu. */
.tk-hub .tk-box__need {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--tk-s1) 0 0; padding: 0;
  background: var(--tk-paper); border: 1px solid var(--tk-rule); border-radius: var(--tk-r-m);
  font-size: 13.5px; line-height: 1.3; color: var(--tk-graphite); text-align: center;
}
.tk-hub .tk-box__need b {
  grid-column: 1 / -1; padding: 10px 14px 0;
  font-family: var(--tk-font-data); font-size: 11px; font-weight: 500;
  line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--tk-stone);
  text-align: center;
}
/* Místo na dva řádky popisku: „Teplota a vlhkost" se zalomí, a pás
   horka by pak byl vyšší než pás chladu vedle něj. */
.tk-hub .tk-box__need span {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  min-width: 0; min-height: calc(29px + 2.6em); margin: 10px 0 12px; padding: 0 10px;
  font-weight: 500; letter-spacing: normal; color: var(--tk-graphite);
  text-align: center; text-wrap: balance; border-left: 1px solid var(--tk-rule);
}
.tk-hub .tk-box__need span:first-of-type { border-left: 0 }
.tk-hub .tk-box__need span::before {
  content: ""; width: 22px; height: 22px; background: var(--tk-warm-ink);
  -webkit-mask: var(--tk-i) center / contain no-repeat; mask: var(--tk-i) center / contain no-repeat;
}
.tk-hub .tk-box[data-tk-pole="cold"] .tk-box__need span::before { background: var(--tk-cold-ink) }
.tk-hub .tk-box__need [data-i="t"] { --tk-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.8 13.7V5.3a2.2 2.2 0 0 1 4.4 0v8.4a4 4 0 1 1-4.4 0z'/%3E%3Cpath d='M12 9.5v7.6'/%3E%3C/svg%3E") }
.tk-hub .tk-box__need [data-i="l"] { --tk-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19.5c.6-3.1 2.8-5 5.5-5s4.9 1.9 5.5 5'/%3E%3Ccircle cx='16.6' cy='9.4' r='2.5'/%3E%3Cpath d='M15.7 14.6c2.3.2 4.1 1.9 4.8 4.9'/%3E%3C/svg%3E") }
.tk-hub .tk-box__need [data-i="h"] { --tk-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3.2 2'/%3E%3C/svg%3E") }
.tk-hub .tk-box__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--tk-s2) var(--tk-s3);
  margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--tk-rule);
  min-height: 36px; font-size: 14px; line-height: 1.4; color: var(--tk-body);
}
/* Text akce mění CSS, ne skript: tlačítko má aria-expanded. Bez
   skriptu karty nic neotvírají, takže se akce neukazuje vůbec. */
.tk-hub .tk-box__cta {
  display: none; align-items: center; gap: 10px; margin-left: auto;
  font-family: var(--tk-font-ui); font-size: 14.5px; font-weight: 600;
  line-height: 1.3; letter-spacing: normal; color: var(--tk-graphite);
}
.tk-hub.tk-js .tk-box__cta { display: inline-flex }
.tk-hub .tk-box__cta::before { content: "Spočítat" }
.tk-hub .tk-box--soon .tk-box__cta::before { content: "Co spočítá" }
.tk-hub .tk-box--open .tk-box__cta::before { content: "Zavřít" }
.tk-hub .tk-box__cta::after {
  content: ""; width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--tk-t) var(--tk-ease);
}
.tk-hub .tk-box--open .tk-box__cta::after { transform: rotate(-135deg); margin-top: 4px }
.tk-hub .tk-box--main .tk-box__cta {
  padding: 9px 16px; border-radius: var(--tk-r-m);
  color: var(--tk-graphite); background: var(--tk-warm);
  transition: background var(--tk-t) var(--tk-ease);
}
.tk-hub .tk-box--main[data-tk-pole="cold"] .tk-box__cta { background: var(--tk-cold) }
.tk-hub.tk-js .tk-box--main:hover .tk-box__cta { background: var(--tk-ember) }
.tk-hub.tk-js .tk-box--main[data-tk-pole="cold"]:hover .tk-box__cta { background: var(--tk-glacier) }
.tk-hub .tk-box--main.tk-box--open .tk-box__cta,
.tk-hub.tk-js .tk-box--main.tk-box--open:hover .tk-box__cta { background: var(--tk-paper) }
.tk-hub .tk-box .tk-soon { display: none }

/* Rozbalená kalkulačka: celý řádek pod kartou, zobáček míří na kartu. */
.tk-hub .tk-hub__panel {
  grid-column: 1 / -1; position: relative; min-width: 0;
  margin: 0; padding: 11px 0 var(--tk-s2);
  animation: tk-rozbal var(--tk-t-slow) var(--tk-ease);
}
.tk-hub .tk-hub__panel[hidden] { display: none }
.tk-hub .tk-hub__panel::before {
  content: ""; position: absolute; z-index: 2; top: 4px;
  left: calc(var(--tk-notch, 50%) - 8px); width: 16px; height: 16px;
  background: var(--tk-bone); border-left: 1px solid var(--tk-rule);
  border-top: 1px solid var(--tk-rule); transform: rotate(45deg);
}
.tk-hub .tk-hub__panel > .tk-calculator { margin: 0; box-shadow: var(--tk-shadow-2) }
@keyframes tk-rozbal {
  from { opacity: 0; transform: translateY(-8px) }
  to { opacity: 1; transform: none }
}

/* Kalkulačka, která ještě není hotová. */
.tk-hub .tk-soon {
  margin: 0; padding: var(--tk-s5);
  background: var(--tk-bone); border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-l); box-shadow: var(--tk-shadow-2);
}
@media (min-width: 600px) {
  .tk-hub .tk-soon { padding: var(--tk-s6) }
}
.tk-hub .tk-hub__panel > .tk-soon { display: block }
.tk-hub .tk-soon__title {
  margin: 0 0 var(--tk-s3); padding: 0;
  font-family: var(--tk-font-display); font-weight: 400;
  font-variation-settings: 'opsz' 36; font-size: 22px; line-height: 1.25;
  color: var(--tk-graphite);
}
.tk-hub .tk-soon p:not([class]) {
  margin: 0 0 var(--tk-s3); padding: 0; max-width: 70ch;
  font-size: 15px; line-height: 1.6; color: var(--tk-body);
}
.tk-hub .tk-soon__note {
  margin: 0; padding: var(--tk-s3) 0 0; border-top: 1px solid var(--tk-rule);
  font-size: 14px; line-height: 1.5; color: var(--tk-stone);
}

/* =====================================================================
   0b · OTÁZKY A ZÁVĚR STRÁNKY (blok tk-info)
   Delší vysvětlování je schované – ukáže se až po kliknutí.
   ===================================================================== */
.tk-info { max-width: var(--tk-max); margin: var(--tk-s7) auto var(--tk-s6) }
.tk-info .tk-info__eyebrow {
  margin: 0 0 var(--tk-s3); padding: 0;
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  line-height: 1.4; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tk-stone);
}
.tk-info .tk-info__title {
  margin: 0 0 var(--tk-s5); padding: 0;
  font-family: var(--tk-font-display); font-weight: 400;
  font-variation-settings: 'opsz' 72; font-size: clamp(26px, 4vw, 36px);
  line-height: 1.1; letter-spacing: -.02em; color: var(--tk-graphite);
  text-transform: none;
}
.tk-info .tk-faq { margin: 0; padding: 0; border-top: 1px solid var(--tk-rule) }
.tk-info .tk-faq__item { margin: 0; padding: 0; border-bottom: 1px solid var(--tk-rule) }
.tk-info .tk-faq__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tk-s4); width: 100%; height: auto; min-height: 60px; margin: 0;
  padding: var(--tk-s4) var(--tk-s1);
  font-family: var(--tk-font-ui); font-size: 17px; font-weight: 500;
  line-height: 1.35; letter-spacing: normal; text-align: left; text-transform: none;
  color: var(--tk-graphite); background: none; border: 0; border-radius: 0;
  box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: color var(--tk-t) var(--tk-ease);
}
.tk-info .tk-faq__q::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin: -4px 6px 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--tk-t) var(--tk-ease);
}
.tk-info .tk-faq__q[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px }
.tk-info .tk-faq__q:hover { color: var(--tk-warm-ink) }
.tk-info .tk-faq__q:focus-visible { outline: none; border-radius: var(--tk-r-s); box-shadow: var(--tk-focus) }
.tk-info .tk-faq__a {
  margin: 0; padding: 0 var(--tk-s1) var(--tk-s5); max-width: 70ch;
  font-size: 15.5px; line-height: 1.65; color: var(--tk-body);
}
.tk-info .tk-faq__a[hidden] { display: none }
.tk-info .tk-faq__a b { font-weight: 600; color: var(--tk-graphite) }

/* Mezi sekcemi stránky stejný vzduch. */
.tk-info .tk-proof, .tk-info .tk-better, .tk-info .tk-faqs { margin: 0 0 72px; padding: 0 }

/* ── Proč tomu věřit: čtyři čísla a zdroje ── */
.tk-info .tk-proof__stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; margin: 0 0 var(--tk-s5); padding: 0; list-style: none;
  border-top: 1px solid var(--tk-rule); border-bottom: 1px solid var(--tk-rule);
}
@media (min-width: 720px) {
  .tk-info .tk-proof__stats { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
.tk-info .tk-proof__stats li {
  margin: 0; padding: var(--tk-s5) var(--tk-s4) var(--tk-s5) 0; list-style: none;
  font-size: 14.5px; line-height: 1.4; color: var(--tk-body);
}
.tk-info .tk-proof__stats b {
  display: block; margin: 0 0 6px;
  font-family: var(--tk-font-display); font-weight: 400;
  font-variation-settings: 'opsz' 96; font-size: clamp(38px, 5vw, 52px);
  line-height: 1; letter-spacing: -.03em; color: var(--tk-graphite);
}
.tk-info .tk-proof__stats li:nth-child(1) b { color: var(--tk-cold-ink) }
.tk-info .tk-proof__stats li:nth-child(4) b { color: var(--tk-warm-ink) }
.tk-info .tk-proof__label {
  margin: 0 0 var(--tk-s3); padding: 0;
  font-family: var(--tk-font-data); font-size: 11.5px; font-weight: 500;
  line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tk-stone);
}
/* Zdroje jako klidný řádek jmen oddělených tečkou – ne šestnáct pilulek. */
.tk-info .tk-proof__src {
  display: block; margin: 0 0 var(--tk-s4); padding: 0; max-width: 92ch;
  font-size: 14px; line-height: 1.85; color: var(--tk-body);
}
.tk-info .tk-proof__src span {
  display: inline; padding: 0; letter-spacing: normal;
  background: none; border: 0; border-radius: 0;
}
.tk-info .tk-proof__src span:not(:last-child)::after {
  content: "·"; margin: 0 .6em; color: var(--tk-stone);
}
.tk-info .tk-proof__link,
.tk-info .tk-better__more a {
  font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: normal;
  color: var(--tk-cold-ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.tk-info .tk-proof__link:hover,
.tk-info .tk-better__more a:hover { color: var(--tk-graphite) }
.tk-info .tk-proof__link:focus-visible,
.tk-info .tk-better__more a:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--tk-focus) }

/* ── Jak čísla zlepšit: tři cesty, třetí vede do sortimentu ── */
/* Úvodní věta na jeden řádek (v sloupci 932 px se vejde celá). */
.tk-info .tk-better__lead {
  margin: -8px 0 var(--tk-s5); padding: 0; max-width: none;
  font-size: 16.5px; line-height: 1.6; color: var(--tk-body); text-wrap: pretty;
}
.tk-info .tk-better__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tk-s3);
  margin: 0; padding: 0;
}
@media (min-width: 720px) {
  .tk-info .tk-better__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
.tk-info .tk-pillar {
  position: relative; display: flex; flex-direction: column; gap: var(--tk-s2);
  min-width: 0; margin: 0; padding: var(--tk-s5);
  background: var(--tk-bone); border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-l); box-shadow: var(--tk-shadow-1);
}
.tk-info .tk-pillar__icon {
  position: relative; display: block; width: 48px; height: 48px; margin: 0 0 var(--tk-s2);
  border-radius: 50%; color: var(--tk-cold-ink); background: rgba(127,179,204,.16);
  border: 1px solid rgba(31,90,117,.16); letter-spacing: 0;
}
.tk-info .tk-pillar__icon::before {
  content: ""; position: absolute; inset: 12px; background: currentColor;
  -webkit-mask: var(--tk-ikona) center / contain no-repeat;
  mask: var(--tk-ikona) center / contain no-repeat;
}
.tk-info .tk-pillar[data-tk-ikona="cas"] { --tk-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") }
.tk-info .tk-pillar[data-tk-ikona="zatez"] { --tk-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.6V5a2 2 0 1 1 4 0v8.6a4 4 0 1 1-4 0z'/%3E%3Cpath d='M12 9.5V16'/%3E%3C/svg%3E") }
.tk-info .tk-pillar[data-tk-ikona="vybava"] { --tk-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 3.5 4 6l1.9 4.2L8 9.3v11.2h8V9.3l2.1.9L20 6l-4.2-2.5c-.6 1.6-2.1 2.6-3.8 2.6s-3.2-1-3.8-2.6z'/%3E%3C/svg%3E") }
.tk-info .tk-pillar__title {
  margin: 0; padding: 0;
  font-family: var(--tk-font-display); font-weight: 400;
  font-variation-settings: 'opsz' 36; font-size: 21px; line-height: 1.2;
  letter-spacing: -.01em; color: var(--tk-graphite); text-transform: none;
}
.tk-info .tk-pillar__text {
  margin: 0; padding: 0; font-size: 15px; line-height: 1.55; color: var(--tk-body);
}
/* Třetí cesta – vybavení – je tmavá a vede do celého sortimentu. */
.tk-info .tk-pillar--shop {
  color: var(--tk-dim); background: var(--tk-slate); border-color: var(--tk-slate);
  box-shadow: var(--tk-shadow-3);
}
.tk-info .tk-pillar--shop .tk-pillar__title { color: var(--tk-bone) }
.tk-info .tk-pillar--shop .tk-pillar__text { color: var(--tk-dim) }
.tk-info .tk-pillar--shop .tk-pillar__icon {
  color: var(--tk-graphite); background: var(--tk-warm); border-color: transparent;
}
.tk-info .tk-pillar__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; margin: auto 0 0; padding: 0 18px;
  font-family: var(--tk-font-ui); font-size: 15.5px; font-weight: 600;
  line-height: 1.2; letter-spacing: normal; text-decoration: none;
  color: var(--tk-graphite); background: var(--tk-warm); border-radius: var(--tk-r-m);
  transition: background var(--tk-t) var(--tk-ease);
}
.tk-info .tk-pillar__cta::after {
  content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor;
  border-right: 2px solid currentColor; transform: rotate(45deg);
}
.tk-info .tk-pillar__cta:hover { color: var(--tk-graphite); background: var(--tk-ember) }
.tk-info .tk-pillar__cta:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tk-slate), 0 0 0 4px var(--tk-ember) }
.tk-info .tk-better__more {
  margin: var(--tk-s4) 0 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--tk-body);
}

/* Upozornění dole na stránce – drobné, ale čitelné. */
.tk-info .tk-legal {
  margin: var(--tk-s6) 0 0; padding: var(--tk-s4) 0 0; max-width: 90ch;
  border-top: 1px solid var(--tk-rule);
  font-size: 12.5px; line-height: 1.6; color: var(--tk-stone);
}
.tk-info .tk-legal b { font-weight: 600; color: var(--tk-body) }

/* ── Závěr pro firmy: tmavý pás jako úvod stránky ── */
.tk-info .tk-close {
  position: relative; overflow: hidden; margin: 0; padding: 48px var(--tk-s5);
  text-align: center; color: var(--tk-dim);
  background:
    radial-gradient(55% 90% at 0% 0%, rgba(143,206,221,.12), transparent 70%),
    radial-gradient(55% 90% at 100% 0%, rgba(240,168,104,.14), transparent 70%),
    var(--tk-slate);
  border-radius: 18px;
}
@media (min-width: 640px) {
  .tk-info .tk-close { padding: 64px 56px }
}
.tk-info .tk-close::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tk-axis-dark);
}
.tk-info .tk-close__title {
  margin: 0 auto var(--tk-s3); padding: 0; max-width: 20ch;
  font-family: var(--tk-font-display); font-weight: 400;
  font-variation-settings: 'opsz' 96; font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.08; letter-spacing: -.02em; color: var(--tk-bone);
  text-transform: none; text-align: center; text-wrap: balance;
}
.tk-info .tk-close__text {
  margin: 0 auto var(--tk-s6); padding: 0; max-width: 52ch;
  font-size: 17px; line-height: 1.6; color: var(--tk-dim); text-align: center;
}
.tk-info .tk-close__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tk-s3);
  margin: 0; padding: 0; font-size: 16px; line-height: 1.2; color: var(--tk-dim);
}
.tk-info .tk-close__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; margin: 0; padding: 0 28px;
  font-family: var(--tk-font-ui); font-size: 16px; font-weight: 600;
  line-height: 1.2; letter-spacing: normal; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--tk-r-m);
  transition: background var(--tk-t) var(--tk-ease), color var(--tk-t) var(--tk-ease);
}
.tk-info .tk-close__btn--warm { color: var(--tk-graphite); background: var(--tk-warm) }
.tk-info .tk-close__btn--warm:hover { color: var(--tk-graphite); background: var(--tk-ember) }
.tk-info .tk-close__btn--ghost { color: var(--tk-bone); background: transparent; border-color: rgba(255,252,248,.4) }
.tk-info .tk-close__btn--ghost:hover { color: var(--tk-slate); background: var(--tk-bone) }
.tk-info .tk-close__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tk-slate), 0 0 0 4px var(--tk-ember) }
@media (max-width: 479px) {
  .tk-info .tk-close__btn { flex: 1 1 100% }
}

/* =====================================================================
   1 · KARTA KALKULAČKY
   ===================================================================== */
.tk-calculator {
  max-width: var(--tk-max);
  margin: var(--tk-s6) auto;
  padding: var(--tk-s5) var(--tk-s4);
  background: var(--tk-bone);
  border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-l);
  box-shadow: var(--tk-shadow-1);
  counter-reset: tk-krok;
  position: relative; overflow: hidden;
}
.tk-calculator::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tk-axis);
}
@media (min-width: 600px) {
  .tk-calculator { padding: var(--tk-s6) var(--tk-s6) }
}
@media (min-width: 900px) {
  .tk-calculator { padding: var(--tk-s7) var(--tk-s7) var(--tk-s6) }
}

/* ── hlavička ── */
.tk-calculator .tk-eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--tk-s3);
  margin: 0 0 var(--tk-s3);
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  line-height: 1.4; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tk-stone);
}
.tk-calculator .tk-title {
  margin: 0 0 var(--tk-s3); padding: 0;
  font-family: var(--tk-font-display); font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: 'opsz' 72;
  font-size: clamp(25px, 4.2vw, 34px); line-height: 1.14;
  letter-spacing: -.012em; color: var(--tk-graphite);
  text-transform: none; text-wrap: balance;
}
.tk-calculator .tk-lead {
  margin: 0 0 var(--tk-s4); max-width: 62ch;
  font-size: 16.5px; line-height: 1.6; color: var(--tk-body);
  text-wrap: pretty;
}
/* Typ výsledku – vidět dřív, než člověk začne vyplňovat. */
.tk-calculator .tk-kind {
  display: inline-flex; align-items: center; gap: var(--tk-s2);
  margin: 0 0 var(--tk-s6); padding: 6px 12px;
  font-size: 13.5px; font-weight: 500; line-height: 1.4;
  color: var(--tk-graphite); background: var(--tk-paper);
  border: 1px solid var(--tk-rule); border-radius: var(--tk-r-pill);
}
.tk-calculator .tk-kind::before {
  content: "≈"; font-family: var(--tk-font-data); font-weight: 500;
  color: var(--tk-warm-ink);
}

/* =====================================================================
   2 · FORMULÁŘ – tři kroky v pořadí, ve kterém se vyplňují
   ===================================================================== */
.tk-calculator .tk-step {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--tk-s5); margin: 0; padding: 0 0 var(--tk-s4) 48px;
  counter-increment: tk-krok;
}
@media (min-width: 640px) {
  .tk-calculator .tk-step { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
.tk-calculator .tk-step__title,
.tk-calculator .tk-step > .tk-help,
.tk-calculator .tk-step > .tk-help__body,
.tk-calculator .tk-step > .tk-checks { grid-column: 1 / -1 }
.tk-calculator .tk-step > .tk-field { margin: 0 0 var(--tk-s4) }
.tk-calculator .tk-step::before {
  content: counter(tk-krok); position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-family: var(--tk-font-data); font-size: 14px; font-weight: 500;
  line-height: 1; color: var(--tk-bone); background: var(--tk-pol-ink);
  box-shadow: 0 0 0 4px rgba(255,138,76,.14);
}
.tk-calculator[data-tk-pole="cold"] .tk-step::before,
.tk-calculator[data-tk-pole="cool"] .tk-step::before {
  box-shadow: 0 0 0 4px rgba(127,179,204,.2);
}
/* Linka spojuje kroky a dovede k tlačítku Vypočítat dopad. */
.tk-calculator .tk-step::after {
  content: ""; position: absolute; left: 15.5px; top: 40px; bottom: 8px;
  width: 1px; background: var(--tk-rule);
}
@media (max-width: 479px) {
  .tk-calculator .tk-step { padding-left: 40px }
  .tk-calculator .tk-step::before { width: 28px; height: 28px; font-size: 13px }
  .tk-calculator .tk-step::after { left: 13.5px; top: 36px }
}
.tk-calculator .tk-step__title {
  margin: 2px 0 var(--tk-s4); padding: 0;
  font-family: var(--tk-font-display); font-weight: 400;
  font-variation-settings: 'opsz' 36; font-size: 21px; line-height: 1.25;
  letter-spacing: -.005em; color: var(--tk-graphite);
}
/* Kalkulačka s jediným krokem nemá číslo ani linku. */
.tk-calculator .tk-step.tk-step--solo { padding-left: 0; counter-increment: none }
.tk-calculator .tk-step.tk-step--solo::before,
.tk-calculator .tk-step.tk-step--solo::after { display: none }

/* Podmínky k zaškrtnutí – skutečná zaškrtávátka, klikací celý řádek. */
.tk-calculator .tk-checks {
  display: grid; margin: 0 0 var(--tk-s4); padding: 0; overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--tk-field-line); border-radius: var(--tk-r-m);
}
.tk-calculator .tk-check {
  display: flex; align-items: flex-start; gap: var(--tk-s3); margin: 0; padding: 13px 14px;
  font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--tk-graphite);
  border-top: 1px solid var(--tk-rule); cursor: pointer;
  transition: background var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-check:first-child { border-top: 0 }
.tk-calculator .tk-check:has(input:checked) { background: var(--tk-paper) }
.tk-calculator .tk-check:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--tk-pol-ink) }
.tk-calculator .tk-check input {
  flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0;
  font: inherit; background: none; border: 0; border-radius: 0; box-shadow: none;
  accent-color: var(--tk-pol-ink); cursor: pointer; outline: none;
}

/* Přepínač „naměřeno / odhad" – připraveno pro fázi 2.
   Rádia zůstávají skutečná (šipky, mezerník, čtečka obrazovky). */
.tk-calculator .tk-switch {
  display: flex; flex-wrap: wrap; gap: var(--tk-s1);
  margin: 0 0 var(--tk-s4); padding: var(--tk-s1);
  background: var(--tk-paper); border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-m);
}
.tk-calculator .tk-switch__opt {
  position: relative; flex: 1 1 200px; display: flex; align-items: center;
  justify-content: center; min-height: 44px; margin: 0;
  padding: var(--tk-s2) var(--tk-s3);
  font-size: 14.5px; font-weight: 500; line-height: 1.3; text-align: center;
  color: var(--tk-body); border-radius: calc(var(--tk-r-m) - 3px);
  cursor: pointer;
  transition: background var(--tk-t) var(--tk-ease), color var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-switch__opt input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; font: inherit; background: transparent;
}
.tk-calculator .tk-switch__opt:hover { background: var(--tk-bone) }
.tk-calculator .tk-switch__opt--on,
.tk-calculator .tk-switch__opt:has(input:checked),
.tk-calculator .tk-switch__opt--on:hover {
  background: var(--tk-graphite); color: var(--tk-bone);
}
.tk-calculator .tk-switch__opt:has(input:focus-visible) { box-shadow: var(--tk-focus) }

/* Pole: popisek nad, jednotka uvnitř vpravo, nápověda pod. */
.tk-calculator .tk-fields {
  display: grid; grid-template-columns: 1fr; gap: var(--tk-s4) var(--tk-s5);
}
@media (min-width: 640px) {
  .tk-calculator .tk-fields { grid-template-columns: 1fr 1fr }
}
.tk-calculator .tk-field { min-width: 0; margin: 0 }
.tk-calculator .tk-field[hidden] { display: none }
.tk-calculator .tk-field__label {
  display: block; margin: 0;
  font-size: 15px; font-weight: 500; line-height: 1.35;
  color: var(--tk-graphite); cursor: pointer;
}
.tk-calculator .tk-field__opt {
  font-weight: 400; letter-spacing: normal; color: var(--tk-stone);
}
.tk-calculator .tk-field__box {
  position: relative; display: block; margin-top: var(--tk-s2); letter-spacing: normal;
}
.tk-calculator .tk-input {
  display: block; width: 100%; max-width: none;
  height: var(--tk-field-h); min-height: var(--tk-field-h); margin: 0;
  padding: 0 64px 0 var(--tk-s3);
  font-family: var(--tk-font-data); font-size: 17px; font-weight: 400;
  line-height: normal; color: var(--tk-graphite);
  font-variant-numeric: tabular-nums;
  background: #FFFFFF; border: 1px solid var(--tk-field-line);
  border-radius: var(--tk-r-m); box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--tk-t) var(--tk-ease),
              box-shadow var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-input::placeholder { color: var(--tk-field-line); opacity: 1 }
.tk-calculator .tk-input:hover { border-color: var(--tk-stone) }
.tk-calculator .tk-input:focus,
.tk-calculator .tk-input:focus-visible {
  border-color: var(--tk-pol-ink); box-shadow: var(--tk-focus-field);
}
.tk-calculator .tk-input[aria-invalid="true"] {
  border-color: var(--tk-error); background: #FFF8F5;
}
.tk-calculator .tk-unit {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; padding: 0 var(--tk-s3);
  font-family: var(--tk-font-data); font-size: 14px; font-weight: 500;
  letter-spacing: normal; color: var(--tk-stone); pointer-events: none;
  border-left: 1px solid var(--tk-rule); background: var(--tk-paper);
  border-radius: 0 calc(var(--tk-r-m) - 1px) calc(var(--tk-r-m) - 1px) 0;
  margin: 1px 1px 1px 0;
}
.tk-calculator .tk-hint {
  margin: var(--tk-s1) 0 0; padding: 0;
  font-size: 13.5px; line-height: 1.5; color: var(--tk-stone);
}
.tk-calculator .tk-error {
  display: flex; gap: var(--tk-s2); align-items: baseline;
  margin: var(--tk-s1) 0 0; padding: 0;
  font-size: 13.5px; font-weight: 500; line-height: 1.45;
  color: var(--tk-error);
}
.tk-calculator .tk-error[hidden] { display: none }
/* Chyba nestojí jen na barvě: má značku i text. */
.tk-calculator .tk-error::before {
  content: "!"; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  color: #FFFFFF; background: var(--tk-error); transform: translateY(3px);
}

/* Vysvětlivka na kliknutí („Co je WBGT…"). */
.tk-calculator .tk-help {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--tk-s2);
  margin: var(--tk-s3) 0 0; padding: 4px 0; height: auto; min-height: 32px;
  font-family: var(--tk-font-ui); font-size: 14.5px; font-weight: 500;
  line-height: 1.35; text-align: left; text-transform: none;
  color: var(--tk-body); background: none; border: 0; border-radius: 0;
  box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  text-decoration: underline; text-decoration-color: var(--tk-rule);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.tk-calculator .tk-help::before {
  content: "?"; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  line-height: 1; color: var(--tk-graphite); background: var(--tk-bone);
  border: 1px solid var(--tk-field-line);
  transition: background var(--tk-t) var(--tk-ease), color var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-help:hover { color: var(--tk-graphite); text-decoration-color: currentColor }
.tk-calculator .tk-help:hover::before,
.tk-calculator .tk-help[aria-expanded="true"]::before {
  color: var(--tk-bone); background: var(--tk-graphite); border-color: var(--tk-graphite);
}
.tk-calculator .tk-help:focus-visible {
  outline: none; border-radius: var(--tk-r-s); box-shadow: var(--tk-focus);
}
.tk-calculator .tk-help[aria-expanded="true"] { color: var(--tk-graphite) }
.tk-calculator .tk-help__body {
  margin: var(--tk-s2) 0 0; padding: var(--tk-s3) var(--tk-s4);
  background: var(--tk-paper); border-left: 3px solid var(--tk-pol-ink);
  border-radius: 0 var(--tk-r-m) var(--tk-r-m) 0;
}
.tk-calculator .tk-help__body[hidden] { display: none }
.tk-calculator .tk-help__body > p {
  margin: 0 0 var(--tk-s2); padding: 0; max-width: 66ch;
  font-size: 14.5px; line-height: 1.6; color: var(--tk-body);
}
.tk-calculator .tk-help__body > p:last-child { margin-bottom: 0 }

/* WBGT z teploty a vlhkosti – samostatný blok. Skript ho posadí do
   kroku 1 kalkulačky horka místo pole WBGT; to se ukáže až na „Mám
   změřené WBGT". Bez skriptu se neukazuje. */
.tk-est { display: none }
.tk-calculator .tk-est { display: block; grid-column: 1 / -1; margin: 0; padding: 0 }
.tk-calculator .tk-est__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tk-s4) var(--tk-s5);
  margin: 0; padding: 0;
}
@media (min-width: 640px) {
  .tk-calculator .tk-est__row { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
.tk-calculator .tk-est--off .tk-est__row,
.tk-calculator .tk-est--off .tk-est__out { display: none }
/* Přepnutí mezi odhadem a změřeným WBGT – textové tlačítko. */
.tk-calculator .tk-est__swap {
  display: inline-flex; align-items: center; gap: var(--tk-s2);
  margin: var(--tk-s3) 0 0; padding: 4px 0; height: auto; min-height: 32px; width: auto;
  font-family: var(--tk-font-ui); font-size: 14.5px; font-weight: 500; line-height: 1.35;
  text-align: left; text-transform: none; letter-spacing: normal; color: var(--tk-body);
  background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--tk-rule);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  -webkit-appearance: none; appearance: none;
}
.tk-calculator .tk-est__swap:hover { color: var(--tk-graphite); text-decoration-color: currentColor }
.tk-calculator .tk-est__swap:focus-visible { outline: none; border-radius: var(--tk-r-s); box-shadow: var(--tk-focus) }
.tk-calculator .tk-est .tk-switch { flex-wrap: nowrap; margin: var(--tk-s2) 0 0 }
.tk-calculator .tk-est .tk-switch__opt {
  flex: 1 1 0; min-width: 0; min-height: 46px; padding: var(--tk-s2) var(--tk-s1);
}
.tk-calculator .tk-est__out {
  margin: var(--tk-s3) 0 0; padding: 10px 14px; min-height: 0;
  font-size: 14px; line-height: 1.5; color: var(--tk-body);
  background: var(--tk-paper); border-left: 3px solid var(--tk-pol-ink);
  border-radius: 0 var(--tk-r-m) var(--tk-r-m) 0;
}
.tk-calculator .tk-est__out:empty { display: none }
.tk-calculator .tk-est__out b {
  font-family: var(--tk-font-data); font-weight: 500; color: var(--tk-graphite); white-space: nowrap;
}

/* =====================================================================
   3 · TLAČÍTKA
   ===================================================================== */
.tk-calculator .tk-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tk-s3);
  margin: 0 0 var(--tk-s3);
}
.tk-calculator .tk-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tk-s2); height: auto; min-height: 52px; margin: 0; padding: 0 var(--tk-s5);
  font-family: var(--tk-font-ui); font-size: 16px; font-weight: 600;
  line-height: 1.2; text-align: center; text-decoration: none;
  text-transform: none; letter-spacing: normal; white-space: normal;
  border: 1px solid transparent; border-radius: var(--tk-r-m);
  background: transparent; color: var(--tk-graphite); box-shadow: none;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background var(--tk-t) var(--tk-ease),
              border-color var(--tk-t) var(--tk-ease),
              box-shadow var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-button--primary {
  background: var(--tk-warm); color: var(--tk-graphite);
  box-shadow: var(--tk-shadow-2);
}
.tk-calculator .tk-button--primary:hover {
  background: var(--tk-ember); box-shadow: var(--tk-shadow-3);
}
.tk-calculator[data-tk-pole="cold"] .tk-button--primary,
.tk-calculator[data-tk-pole="cool"] .tk-button--primary { background: var(--tk-cold) }
.tk-calculator[data-tk-pole="cold"] .tk-button--primary:hover,
.tk-calculator[data-tk-pole="cool"] .tk-button--primary:hover { background: var(--tk-glacier) }
.tk-calculator[data-tk-pole="cold"] .tk-result__label,
.tk-calculator[data-tk-pole="cool"] .tk-result__label { color: var(--tk-glacier) }
.tk-calculator[data-tk-pole="cold"] .tk-kind::before,
.tk-calculator[data-tk-pole="cool"] .tk-kind::before { color: var(--tk-cold-ink) }
.tk-calculator .tk-button--ghost {
  background: transparent; color: var(--tk-graphite);
  border-color: #CFC6B8; font-weight: 500;
}
.tk-calculator .tk-button--ghost:hover { background: var(--tk-paper) }
.tk-calculator .tk-button:focus-visible { outline: none; box-shadow: var(--tk-focus) }
@media (max-width: 479px) {
  .tk-calculator .tk-button { flex: 1 1 100% }
}

/* Stavový řádek: říká, kdy a proč se výsledek změnil. */
.tk-calculator .tk-status {
  margin: 0 0 var(--tk-s5); padding: 0; min-height: 1.5em;
  font-size: 14.5px; line-height: 1.5; color: var(--tk-stone);
}
.tk-calculator .tk-status--error { color: var(--tk-error); font-weight: 500 }
.tk-calculator .tk-status--stale { color: var(--tk-warn); font-weight: 500 }

/* =====================================================================
   4 · VÝSLEDEK
   ===================================================================== */
.tk-calculator .tk-out { margin: 0 }
.tk-calculator .tk-empty {
  margin: 0; padding: var(--tk-s5);
  font-size: 15px; line-height: 1.55; color: var(--tk-stone);
  text-align: center; background: var(--tk-paper);
  border: 1px dashed #CFC6B8; border-radius: var(--tk-r-l);
}
/* Neaktuální výsledek: zůstane vidět, ale je jasně ztlumený
   a stavový řádek nad ním říká proč. Ne jen barvou. */
.tk-calculator .tk-out--stale .tk-result,
.tk-calculator .tk-out--stale .tk-steps {
  opacity: .5; filter: saturate(.4);
}

.tk-calculator .tk-result {
  position: relative; overflow: hidden;
  padding: var(--tk-s5) var(--tk-s4);
  color: var(--tk-dim); background: var(--tk-slate);
  border-radius: var(--tk-r-l); box-shadow: var(--tk-shadow-3);
  transition: opacity var(--tk-t-slow) var(--tk-ease);
}
@media (min-width: 600px) {
  .tk-calculator .tk-result { padding: var(--tk-s6) }
}
.tk-calculator .tk-result::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tk-axis-dark);
}
.tk-calculator .tk-result__label {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tk-s2);
  margin: 0; padding: 0;
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  line-height: 1.4; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tk-ember);
}
.tk-calculator .tk-result__value {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tk-s2);
  margin: var(--tk-s3) 0 var(--tk-s3); padding: 0;
  font-family: var(--tk-font-data); font-weight: 500;
  font-size: clamp(44px, 11vw, 80px); line-height: .95;
  letter-spacing: -.04em; color: var(--tk-bone);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.tk-calculator .tk-result__unit {
  font-family: var(--tk-font-ui); font-size: 18px; font-weight: 500;
  letter-spacing: 0; color: var(--tk-dim);
}
.tk-calculator .tk-result__calc {
  margin: 0 0 var(--tk-s1); padding: 0;
  font-family: var(--tk-font-data); font-size: 14px; font-weight: 500;
  line-height: 1.5; letter-spacing: normal; color: var(--tk-dim); overflow-wrap: anywhere;
}
/* Škála ve výsledku – stejná řeč jako stupnice v úvodu: pásmo, kde
   studie počítá pokles, je barevné; tečka je Vaše hodnota, svislá
   ryska hranice. Polohy nastaví skript (--tk-at) a CSS (--tk-hranice). */
.tk-calculator .tk-gauge {
  position: relative; height: 64px; margin: var(--tk-s4) 0 0; padding: 0;
  --tk-hranice: 46.667%; --tk-ryska: 16.667%;
}
.tk-calculator[data-tk-calc="cold"] .tk-gauge { --tk-hranice: 60%; --tk-ryska: 10% }
.tk-calculator .tk-gauge::before {
  content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 8px;
  border-radius: var(--tk-r-pill);
  background:
    repeating-linear-gradient(90deg, rgba(255,252,248,.22) 0 1px, transparent 1px var(--tk-ryska)) 0 0 / 100% 100%,
    linear-gradient(90deg, var(--tk-track) 0 var(--tk-hranice), var(--tk-ember) var(--tk-hranice) 100%);
}
.tk-calculator[data-tk-pole="cold"] .tk-gauge::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,252,248,.22) 0 1px, transparent 1px var(--tk-ryska)) 0 0 / 100% 100%,
    linear-gradient(90deg, var(--tk-glacier) 0 var(--tk-hranice), var(--tk-track) var(--tk-hranice) 100%);
}
/* Chlad: hranice stojí vpravo od středu, popisek jde doleva od rysky. */
.tk-calculator[data-tk-calc="cold"] .tk-gauge::after {
  padding: 24px 6px 0 0; margin-left: 1px; transform: translateX(-100%);
  border-left: 0; border-right: 2px solid var(--tk-bone);
}
.tk-calculator .tk-gauge::after {
  content: attr(data-h); position: absolute; top: 24px; left: var(--tk-hranice);
  height: 20px; padding: 24px 0 0 6px; margin-left: -1px;
  border-left: 2px solid var(--tk-bone);
  font-family: var(--tk-font-data); font-size: 11.5px; font-weight: 500;
  line-height: 1; letter-spacing: .06em; white-space: nowrap; color: var(--tk-dim);
}
.tk-calculator .tk-gauge__mark {
  position: absolute; top: 25px; left: var(--tk-at, 0%); width: 18px; height: 18px;
  margin-left: -9px; border-radius: 50%; letter-spacing: 0;
  background: var(--tk-bone); border: 4px solid var(--tk-slate);
  box-shadow: 0 0 0 2px var(--tk-bone);
  transition: left var(--tk-t-slow) var(--tk-ease);
}
.tk-calculator .tk-gauge__mark::after {
  content: attr(data-v); position: absolute; bottom: 22px; left: 50%;
  transform: translateX(-50%); padding: 3px 8px; border-radius: var(--tk-r-s);
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  line-height: 1.2; white-space: nowrap; color: var(--tk-slate); background: var(--tk-bone);
}
/* Konce stupnice – prázdný <i> ze skriptu, texty dává CSS podle kalkulačky. */
.tk-calculator .tk-gauge i {
  position: absolute; left: 0; right: 0; top: 48px; height: 12px;
  margin: 0; padding: 0; font-style: normal; pointer-events: none;
}
.tk-calculator .tk-gauge i::before,
.tk-calculator .tk-gauge i::after {
  position: absolute; top: 0; font-family: var(--tk-font-data); font-size: 11px;
  font-weight: 500; line-height: 1; letter-spacing: .04em; white-space: nowrap;
  color: #9AA3AB;
}
.tk-calculator .tk-gauge i::before { content: "10\a0 °C"; left: 0 }
.tk-calculator .tk-gauge i::after { content: "40\a0 °C"; right: 0 }
.tk-calculator[data-tk-calc="cold"] .tk-gauge i::before { content: "−20\a0 °C" }
.tk-calculator[data-tk-calc="cold"] .tk-gauge i::after { content: "30\a0 °C" }
/* Dva body: prázdný kroužek = výchozí hodnota (vzduch, zvyklý zaměstnanec),
   plná tečka = výsledek, mezi nimi barevný úsek – o kolik. */
.tk-calculator .tk-gauge--pas::after { display: none }
.tk-calculator .tk-gauge--pas::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,252,248,.22) 0 1px, transparent 1px var(--tk-ryska)) 0 0 / 100% 100%,
    linear-gradient(90deg, var(--tk-track) 0 var(--tk-od, 0%), var(--tk-ember) var(--tk-od, 0%) var(--tk-do, 0%), var(--tk-track) var(--tk-do, 0%) 100%);
}
.tk-calculator[data-tk-pole="cool"] .tk-gauge--pas::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,252,248,.22) 0 1px, transparent 1px var(--tk-ryska)) 0 0 / 100% 100%,
    linear-gradient(90deg, var(--tk-track) 0 var(--tk-od, 0%), var(--tk-glacier) var(--tk-od, 0%) var(--tk-do, 0%), var(--tk-track) var(--tk-do, 0%) 100%);
}
.tk-calculator .tk-gauge__mark--ref {
  top: 26px; width: 16px; height: 16px; margin-left: -8px;
  background: var(--tk-slate); border: 3px solid var(--tk-dim); box-shadow: none;
}
.tk-calculator .tk-gauge__mark--ref::after {
  top: 21px; bottom: auto; padding: 0; color: var(--tk-dim); background: none;
}
/* Pocitová teplota: stupnice 20–60 °C, ryska po 5 °C; kroužek = vzduch,
   tečka = pocitově, úsek mezi nimi = co přidá (nebo ubere) vlhkost. */
.tk-calculator[data-tk-calc="feel"] .tk-gauge { --tk-ryska: 12.5% }
.tk-calculator[data-tk-calc="feel"] .tk-gauge i::before { content: "20\a0 °C" }
.tk-calculator[data-tk-calc="feel"] .tk-gauge i::after { content: "60\a0 °C" }
/* „> 58 °C" stojí na samém konci stupnice: popisek se zarovná k tečce
   zprava, jinak by na telefonu vyjel z karty. */
.tk-calculator .tk-gauge__mark[data-v^=">"]::after { left: auto; right: -6px; transform: none }
/* Riziko úrazu: stupnice 10–45 °C s pásmy ze studie – běžný den (index
   100), dny kolem 32 °C (106–109) a od 38 °C (110–115). Mezi nimi
   studie číslo neuvádí, pás je neutrální. */
.tk-calculator[data-tk-calc="risk"] .tk-gauge { --tk-hranice: 63.43%; --tk-ryska: 14.286% }
.tk-calculator[data-tk-calc="risk"] .tk-gauge::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,252,248,.22) 0 1px, transparent 1px var(--tk-ryska)) 0 0 / 100% 100%,
    linear-gradient(90deg, var(--tk-dim) 0 16%, var(--tk-track) 16% 63.43%, #B4582A 63.43% 79.43%, var(--tk-ember) 79.43% 100%);
}
.tk-calculator[data-tk-calc="risk"] .tk-gauge i::before { content: "100" }
.tk-calculator[data-tk-calc="risk"] .tk-gauge i::after { content: "110–115" }
@media (max-width: 419px) {
  .tk-calculator .tk-gauge i { display: none }
}
/* Popisek hodnoty stojí nad tečkou na střed; u kraje stupnice by na
   telefonu (výsledek má odsazení jen 16 px) vyjel z karty. */
@media (max-width: 599px) {
  .tk-calculator .tk-gauge { margin-left: var(--tk-s4); margin-right: var(--tk-s4) }
}
/* Odhadnuté WBGT – řádek ve výsledku doplní blok s odhadem. */
.tk-calculator .tk-result__est {
  position: relative; margin: var(--tk-s2) 0 0; padding: 0 0 0 22px;
  font-size: 13.5px; line-height: 1.45; color: var(--tk-dim);
}
.tk-calculator .tk-result__est::before {
  content: "≈"; position: absolute; left: 0; top: 0;
  font-family: var(--tk-font-data); font-weight: 500; color: var(--tk-bone);
}
.tk-calculator .tk-result__est + .tk-result__note { margin-top: var(--tk-s2) }
.tk-calculator .tk-result__note {
  margin: 0; padding: 0; max-width: 60ch;
  font-size: 15.5px; line-height: 1.6; color: var(--tk-dim);
  text-wrap: pretty;
}
.tk-calculator .tk-result__note b { font-weight: 600; color: var(--tk-bone) }

/* Doplňkové výsledky: dlaždice číslo – popisek – typ údaje. */
.tk-calculator .tk-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--tk-s3); margin: var(--tk-s5) 0 0; padding: 0;
}
.tk-calculator .tk-tile {
  container-type: inline-size;
  min-width: 0; margin: 0; padding: 14px var(--tk-s4);
  background: rgba(255,252,248,.035); border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-m);
}
.tk-calculator .tk-tile__value {
  margin: 0; padding: 0;
  font-family: var(--tk-font-data); font-size: clamp(20px, 6.4vw, 26px);
  font-size: clamp(20px, 12.5cqi, 26px); font-weight: 500;
  line-height: 1.15; letter-spacing: -.02em; color: var(--tk-bone);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.tk-calculator .tk-tile__label {
  margin: var(--tk-s1) 0 var(--tk-s2); padding: 0;
  font-size: 13.5px; line-height: 1.4; color: var(--tk-dim);
}
.tk-calculator .tk-tile__calc {
  margin: 0; padding: 0;
  font-family: var(--tk-font-data); font-size: 12.5px; font-weight: 400;
  line-height: 1.45; color: var(--tk-dim); overflow-wrap: anywhere;
}
.tk-calculator .tk-result__foot {
  margin: var(--tk-s4) 0 0; padding: 0;
  font-size: 13.5px; line-height: 1.5; color: var(--tk-dim);
}

/* Návrh ke schválení – dokud metodika není ověřená, říká to výsledek. */
.tk-calculator .tk-draft {
  position: relative;
  margin: var(--tk-s5) 0 0; padding: var(--tk-s3) var(--tk-s4) var(--tk-s3) 46px;
  font-size: 14px; line-height: 1.55; color: var(--tk-dim);
  background: rgba(255,252,248,.04); border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-m);
}
/* Značka „i" – upozornění nestojí na barvě. Stav práce, proto bez pólu. */
.tk-calculator .tk-draft::before {
  content: "i"; position: absolute; left: var(--tk-s4); top: 13px;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500; line-height: 1;
  color: var(--tk-slate); background: var(--tk-dim);
}
.tk-calculator .tk-draft b { color: var(--tk-bone); font-weight: 600 }

/* ── jak výsledek vznikl ── */
.tk-calculator .tk-steps {
  margin: var(--tk-s4) 0 0; padding: var(--tk-s5) var(--tk-s4);
  background: #FFFFFF; border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-l);
}
@media (min-width: 600px) {
  .tk-calculator .tk-steps { padding: var(--tk-s5) var(--tk-s6) }
}
.tk-calculator .tk-steps__title {
  margin: 0 0 var(--tk-s3); padding: 0;
  font-family: var(--tk-font-display); font-weight: 400;
  font-variation-settings: 'opsz' 36; font-size: 20px; line-height: 1.25;
  color: var(--tk-graphite);
}
.tk-calculator .tk-steps__list {
  margin: 0; padding: 0; list-style: none; counter-reset: tk-radek;
}
.tk-calculator .tk-steps__list > li {
  position: relative; margin: 0; padding: var(--tk-s2) 0 var(--tk-s2) 36px;
  font-size: 15px; line-height: 1.55; color: var(--tk-body);
  list-style: none; border-top: 1px solid var(--tk-rule);
  counter-increment: tk-radek;
}
.tk-calculator .tk-steps__list > li:first-child { border-top: 0 }
.tk-calculator .tk-steps__list > li::before {
  content: counter(tk-radek); position: absolute; left: 0; top: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  color: var(--tk-graphite); background: var(--tk-paper);
  border: 1px solid var(--tk-rule);
}
.tk-calculator .tk-steps__list b,
.tk-calculator .tk-math {
  font-family: var(--tk-font-data); font-weight: 500;
  color: var(--tk-graphite); font-variant-numeric: tabular-nums;
}
.tk-calculator .tk-steps__foot {
  margin: var(--tk-s3) 0 0; padding: 0;
  font-size: 13.5px; line-height: 1.5; color: var(--tk-stone);
}

/* =====================================================================
   5 · OMEZENÍ, METODIKA, DALŠÍ KROK
   ===================================================================== */
.tk-calculator .tk-note {
  margin: var(--tk-s5) 0 0; padding: var(--tk-s5) var(--tk-s4);
  background: var(--tk-paper); border: 1px solid var(--tk-rule);
  border-left: 4px solid var(--tk-warn);
  border-radius: var(--tk-r-m);
}
@media (min-width: 600px) {
  .tk-calculator .tk-note { padding: var(--tk-s5) var(--tk-s6) }
}
.tk-calculator .tk-note__title {
  margin: 0 0 var(--tk-s2); padding: 0;
  font-size: 16px; font-weight: 600; line-height: 1.4;
  color: var(--tk-graphite);
}
.tk-calculator .tk-list {
  margin: 0; padding: 0; list-style: none;
}
.tk-calculator .tk-list > li {
  position: relative; margin: 0; padding: 3px 0 3px 20px;
  font-size: 14.5px; line-height: 1.55; color: var(--tk-body);
  list-style: none;
}
.tk-calculator .tk-list > li::before {
  content: ""; position: absolute; left: 4px; top: .78em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--tk-stone);
}
/* strong: editor stránek může statické <b> přepsat na <strong>. */
.tk-calculator .tk-list b,
.tk-calculator .tk-list strong { font-weight: 600; color: var(--tk-graphite) }

.tk-calculator .tk-method {
  margin: var(--tk-s4) 0 0; border: 1px solid var(--tk-rule);
  border-radius: var(--tk-r-m); background: #FFFFFF;
}
.tk-calculator .tk-method__toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tk-s3); width: 100%; height: auto; min-height: 52px; margin: 0;
  padding: var(--tk-s3) var(--tk-s4);
  font-family: var(--tk-font-ui); font-size: 15.5px; font-weight: 600;
  line-height: 1.3; text-align: left; text-transform: none;
  color: var(--tk-graphite); background: transparent; border: 0;
  border-radius: var(--tk-r-m); box-shadow: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.tk-calculator .tk-method__toggle::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-method__toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg); margin-top: 4px;
}
.tk-calculator .tk-method__toggle:hover { background: var(--tk-paper) }
.tk-calculator .tk-method__toggle:focus-visible { outline: none; box-shadow: var(--tk-focus) }
.tk-calculator .tk-method__body {
  padding: 0 var(--tk-s4) var(--tk-s4);
  font-size: 14.5px; line-height: 1.6; color: var(--tk-body);
}
.tk-calculator .tk-method__body[hidden] { display: none }
.tk-calculator .tk-method__body > p { margin: 0 0 var(--tk-s3); padding: 0 }
/* Odstavec bez třídy – typografie výslovně, šablona by ho jinak
   přestylovala jako obecný „p". */
.tk-calculator .tk-method__body > p:not([class]) {
  font-family: var(--tk-font-ui); font-size: 14.5px; font-weight: 400;
  line-height: 1.6; color: var(--tk-body);
}
.tk-calculator .tk-method__body .tk-math {
  display: block; padding: var(--tk-s3) var(--tk-s4); margin: 0 0 var(--tk-s3);
  font-size: 14.5px; line-height: 1.6; background: var(--tk-paper);
  border-radius: var(--tk-r-s); overflow-wrap: anywhere;
}
.tk-calculator .tk-sources { margin: 0; padding: 0; list-style: none }
.tk-calculator .tk-sources > li {
  margin: 0; padding: var(--tk-s3) 0; list-style: none;
  border-top: 1px solid var(--tk-rule);
  font-size: 14px; line-height: 1.55; color: var(--tk-body);
}
.tk-calculator .tk-sources a,
.tk-calculator .tk-next__link {
  color: var(--tk-cold-ink); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.tk-calculator .tk-sources a:hover,
.tk-calculator .tk-next__link:hover { color: var(--tk-graphite) }
.tk-calculator .tk-sources a:focus-visible,
.tk-calculator .tk-next__link:focus-visible {
  outline: none; border-radius: 2px; box-shadow: var(--tk-focus);
}
.tk-calculator .tk-badge {
  display: inline-block; padding: 0 6px; margin-left: 2px;
  font-family: var(--tk-font-data); font-size: 11px; font-weight: 500;
  line-height: 1.6; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tk-warn); border: 1px solid currentColor;
  border-radius: var(--tk-r-s); white-space: nowrap;
}

/* Další krok – odděleně od výsledku, bez slibu, že výrobek něco vrátí. */
.tk-calculator .tk-next {
  margin: var(--tk-s5) 0 0; padding: var(--tk-s4) 0 0;
  font-size: 15px; line-height: 1.55; color: var(--tk-body);
  border-top: 1px solid var(--tk-rule);
}
.tk-calculator .tk-next__link { font-weight: 600 }

/* Bez skriptu kalkulačka nepočítá – a řekne to. */
.tk-calculator .tk-nojs {
  margin: 0 0 var(--tk-s4); padding: var(--tk-s3) var(--tk-s4);
  font-size: 14.5px; line-height: 1.5; color: var(--tk-warn);
  background: var(--tk-paper); border-radius: var(--tk-r-m);
}
.tk-calculator.tk-js .tk-nojs { display: none }

/* =====================================================================
   6 · POHYB A TISK
   ===================================================================== */
/* =====================================================================
   9 · ŘEČ BOXŮ WEBU A PRÉMIOVÉ DETAILY (DOČASNÉ – ke schválení)
   Jako boxy na titulce obchodu („PRO HORKÉ DNY / Celé chlazení"):
   proužek pólu vlevo, nadpis v inkoustu pólu, větší název. K tomu
   jemný nádech pólu v rohu ploch a stíny tlačítek v barvě tlačítka.
   Nádech má krytí nejvýš 0,13 – text na plochách si drží kontrast.
   ===================================================================== */

/* Nadpis karty a kalkulačky („HORKO · POCITOVÁ TEPLOTA") v inkoustu
   pólu: na kosti teplý 5,3 : 1, chladný 7,4 : 1. */
.tk-hub .tk-box__meta {
  font-size: 12.5px; letter-spacing: .14em; color: var(--tk-warm-ink);
}
.tk-hub .tk-box[data-tk-pole="cold"] .tk-box__meta,
.tk-hub .tk-box[data-tk-pole="cool"] .tk-box__meta { color: var(--tk-cold-ink) }
.tk-calculator .tk-eyebrow {
  font-size: 12.5px; letter-spacing: .14em; color: var(--tk-pol-ink);
}
/* Vpravo nahoře na kartě malá stupnice chlad–horko s tečkou, kde
   karta na ose stojí – stejná značka jako v záhlaví kalkulačky.
   U nadpisu by delší název („Horko · pocitová teplota") zalomila. */
.tk-hub .tk-box__top::after {
  content: ""; flex: 0 0 auto; width: 56px; height: 12px;
  background:
    radial-gradient(circle at var(--tk-pole-pos) 50%, var(--tk-bone) 0 2.5px, var(--tk-graphite) 3px 4.4px, transparent 5px),
    var(--tk-axis) 0 50% / 100% 4px no-repeat;
}

/* Menší karty: proužek pólu vlevo jako boxy webu, název o stupeň větší,
   výzva v inkoustu pólu. Při najetí se zvednou a stín se zahřeje. */
.tk-hub .tk-box:not(.tk-box--main) {
  padding-left: 24px; border-left: 4px solid var(--tk-warm);
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(255,138,76,.07), transparent 65%),
    var(--tk-bone);
}
.tk-hub .tk-box[data-tk-pole="cold"]:not(.tk-box--main),
.tk-hub .tk-box[data-tk-pole="cool"]:not(.tk-box--main) {
  border-left-color: var(--tk-cold);
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(127,179,204,.10), transparent 65%),
    var(--tk-bone);
}
.tk-hub .tk-box:not(.tk-box--main) .tk-box__title { font-size: 21px; line-height: 1.2 }
.tk-hub .tk-box:not(.tk-box--main) .tk-box__cta { color: var(--tk-warm-ink) }
.tk-hub .tk-box[data-tk-pole="cold"]:not(.tk-box--main) .tk-box__cta,
.tk-hub .tk-box[data-tk-pole="cool"]:not(.tk-box--main) .tk-box__cta { color: var(--tk-cold-ink) }
.tk-hub.tk-js .tk-box:not(.tk-box--main):hover {
  border-left-color: var(--tk-warm);
  box-shadow: 0 3px 6px rgba(28,27,26,.06), 0 20px 40px -16px rgba(177,74,24,.30);
}
.tk-hub.tk-js .tk-box[data-tk-pole="cold"]:not(.tk-box--main):hover,
.tk-hub.tk-js .tk-box[data-tk-pole="cool"]:not(.tk-box--main):hover {
  border-left-color: var(--tk-cold);
  box-shadow: 0 3px 6px rgba(28,27,26,.06), 0 20px 40px -16px rgba(31,90,117,.30);
}
.tk-hub .tk-box--open:not(.tk-box--main) { border-left-color: var(--tk-warm) }
.tk-hub .tk-box--open[data-tk-pole="cold"]:not(.tk-box--main),
.tk-hub .tk-box--open[data-tk-pole="cool"]:not(.tk-box--main) { border-left-color: var(--tk-cold) }

/* Hlavní karty: nádech pólu v rohu, který je blíž svému konci osy. */
.tk-hub .tk-box--main {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255,138,76,.09), transparent 62%),
    var(--tk-bone);
}
.tk-hub .tk-box--main[data-tk-pole="cold"] {
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(127,179,204,.14), transparent 62%),
    var(--tk-bone);
}
.tk-hub .tk-box--main .tk-box__cta { box-shadow: 0 10px 20px -10px rgba(177,74,24,.55) }
.tk-hub .tk-box--main[data-tk-pole="cold"] .tk-box__cta { box-shadow: 0 10px 20px -10px rgba(31,90,117,.50) }
.tk-hub .tk-box--main.tk-box--open .tk-box__cta { box-shadow: none }

/* Ikony jako drobné medailony: světlo vlevo nahoře, stín v barvě pólu. */
.tk-hub .tk-box__icon {
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0, rgba(255,138,76,.18) 72%);
  box-shadow: 0 6px 14px -8px rgba(177,74,24,.45);
}
.tk-hub .tk-box[data-tk-pole="cold"] .tk-box__icon,
.tk-hub .tk-box[data-tk-pole="cool"] .tk-box__icon {
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0, rgba(127,179,204,.24) 72%);
  box-shadow: 0 6px 14px -8px rgba(31,90,117,.45);
}

/* Kalkulačka: tentýž nádech pólu v horním rohu karty. */
.tk-calculator {
  background:
    radial-gradient(60% 280px at 100% 0%, rgba(255,138,76,.06), transparent 70%),
    var(--tk-bone);
}
.tk-calculator[data-tk-pole="cold"], .tk-calculator[data-tk-pole="cool"] {
  background:
    radial-gradient(60% 280px at 0% 0%, rgba(127,179,204,.09), transparent 70%),
    var(--tk-bone);
}

/* Hlavní tlačítko: stín v barvě tlačítka, jako tlačítka webu. */
.tk-calculator .tk-button--primary {
  box-shadow: 0 1px 2px rgba(28,27,26,.08), 0 12px 24px -12px rgba(177,74,24,.60);
}
.tk-calculator .tk-button--primary:hover {
  box-shadow: 0 1px 2px rgba(28,27,26,.08), 0 16px 30px -12px rgba(177,74,24,.65);
}
.tk-calculator[data-tk-pole="cold"] .tk-button--primary,
.tk-calculator[data-tk-pole="cool"] .tk-button--primary {
  box-shadow: 0 1px 2px rgba(28,27,26,.08), 0 12px 24px -12px rgba(31,90,117,.55);
}

/* Výsledek: tmavý přístroj se žhnoucím rohem v barvě pólu. */
.tk-calculator .tk-result {
  background:
    radial-gradient(55% 75% at 100% 0%, rgba(240,168,104,.14), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(143,206,221,.05), transparent 70%),
    var(--tk-slate);
}
.tk-calculator[data-tk-pole="cold"] .tk-result,
.tk-calculator[data-tk-pole="cool"] .tk-result {
  background:
    radial-gradient(55% 75% at 0% 0%, rgba(143,206,221,.14), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgba(240,168,104,.05), transparent 70%),
    var(--tk-slate);
}
/* Dlaždice jako sklo: světlejší nahoře, jemná hrana. */
.tk-calculator .tk-tile {
  background: linear-gradient(180deg, rgba(255,252,248,.075), rgba(255,252,248,.02));
  box-shadow: inset 0 1px 0 rgba(255,252,248,.06);
}

/* Tmavá karta s nákupem: horní hrana = osa, jako závěr stránky. */
.tk-info .tk-pillar--shop { overflow: hidden }
.tk-info .tk-pillar--shop::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tk-axis-dark);
}

/* =====================================================================
   10 · STRÁNKA V ŠABLONĚ (Waltz) – jediné zápisy mimo .tk-
   Dnešní stránka /kalkulacka/ skrývá nadpis Shoptetu, drobečky a štítek
   v pruhu záhlaví pravidly `body:has(.ftp)` ze stylopisu webu. Nové
   bloky .ftp nemají, takže by po vložení stály nad rozcestníkem tři
   nadpisy „Kalkulačka" a drobečky (změřeno na zrcadle živé stránky
   bez starých bloků). Tytéž zásahy proto platí i pro náš rozcestník –
   jen na stránce, kde je, nikde jinde v obchodě.
   Bez podpory :has() se nic nerozbije: nadpis Shoptetu prostě zůstane.
   ===================================================================== */
body:has(.tk-hub) .pageArticleDetail > header,
body:has(.tk-hub) .breadcrumbs,
body:has(.tk-hub) .header-title { display: none }
/* Boky stránky bílé jako na ostatních stránkách webu s naším obsahem. */
body:has(.tk-hub) { background: #FFFFFF }

@media print {
  /* Na papír jen kalkulačky: lišta, menu, hledání, bannery, patička
     a diskuze pryč (stejně jako u ostatních stránek webu). */
  body:has(.tk-hub) .siteCookies,
  body:has(.tk-hub) .skip-link,
  body:has(.tk-hub) .user-action,
  body:has(.tk-hub) .navigation-buttons,
  body:has(.tk-hub) .navigation-in,
  body:has(.tk-hub) .search,
  body:has(.tk-hub) .banners-top,
  body:has(.tk-hub) .benefitBanner,
  body:has(.tk-hub) .messages,
  body:has(.tk-hub) .discussionContainer,
  body:has(.tk-hub) .pageArticleDetail ~ h2,
  body:has(.tk-hub) > .overall-wrapper > header,
  body:has(.tk-hub) > .overall-wrapper > footer { display: none }
}

/* =====================================================================
   11 · DALŠÍ KROK PO VÝSLEDKU (13. 10. 2026)
   Zákazník právě dostal číslo – tady je nejochotnější jednat. Místo
   podtrženého odkazu na konci karty pruh s tlačítkem: štítek „Další
   krok:" v Plex Mono a inkoustu pólu, cíl jako tmavé tlačítko webu
   (břidlice + kost, 14,7 : 1). Proužek pólu vlevo jako karty webu.
   Bez slibu účinku – text odkazu zůstává „Možnosti ochrany…".
   ===================================================================== */
.tk-calculator .tk-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px; margin: var(--tk-s5) 0 0; padding: 16px 16px 16px 20px;
  border: 1px solid var(--tk-rule); border-left: 4px solid var(--tk-warm);
  border-radius: var(--tk-r-l);
  background: radial-gradient(90% 140% at 0% 0%, rgba(255,138,76,.08), transparent 70%), var(--tk-bone);
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--tk-pol-ink);
}
.tk-calculator[data-tk-pole="cold"] .tk-next,
.tk-calculator[data-tk-pole="cool"] .tk-next {
  border-left-color: var(--tk-cold);
  background: radial-gradient(90% 140% at 0% 0%, rgba(127,179,204,.12), transparent 70%), var(--tk-bone);
}
.tk-calculator .tk-next__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 0 18px; border-radius: var(--tk-r-m);
  background: var(--tk-slate); color: var(--tk-bone);
  font-family: var(--tk-font-ui); font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none; text-decoration: none;
  box-shadow: 0 1px 2px rgba(28,27,26,.10), 0 10px 22px -12px rgba(28,27,26,.55);
  transition: background-color var(--tk-t) var(--tk-ease), transform var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-next__link::after { content: "\2192"; font-weight: 500 }
.tk-calculator .tk-next__link:hover {
  color: var(--tk-bone); background: var(--tk-graphite); transform: translateX(2px);
}
.tk-calculator .tk-next__link:focus-visible { box-shadow: var(--tk-focus) }
@media print {
  .tk-calculator .tk-next { background: #FFFFFF; border-color: #999999 }
  .tk-calculator .tk-next__link { color: #000000; background: none; box-shadow: none; padding: 0 }
}

/* =====================================================================
   12 · LUXUSNÍ VRSTVA – JAZYK STUDIE I TADY (13. 10. 2026)
   Jen styl, žádný text. Prvky, které už má stránka Studie, aby obě
   stránky působily jako jeden web: mřížka v tmavých plochách, panel
   s osou nahoře, osa u štítků sekcí, číslované otázky.
   ===================================================================== */

/* Tmavý úvod a závěr: jemná mřížka 52 px, mizí ke spodku (jako úvod
   Studie, krytí 0,028 – na kontrast textu nemá vliv). */
.tk-hub .tk-hub__hero::after,
.tk-info .tk-close::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,252,248,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,252,248,.028) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}

/* Štítek sekce s krátkou osou značky před sebou. */
.tk-info .tk-info__eyebrow { display: flex; align-items: center; gap: 12px }
.tk-info .tk-info__eyebrow::before {
  content: ""; flex: 0 0 auto; width: 28px; height: 2px; border-radius: 1px;
  background: var(--tk-axis);
}

/* „Proč tomu věřit?" jako panel webu: teplý papír, osa nahoře,
   čísla oddělená svislými vlásky. */
.tk-info .tk-proof {
  position: relative; overflow: hidden; padding: 40px 24px 32px;
  background: #EFE9E0; border: 1px solid var(--tk-rule); border-radius: var(--tk-r-l);
}
.tk-info .tk-proof::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tk-axis);
}
@media (min-width: 640px) {
  .tk-info .tk-proof { padding: 48px 40px 40px }
  .tk-info .tk-proof__stats li + li { padding-left: var(--tk-s4); border-left: 1px solid var(--tk-rule) }
}
.tk-info .tk-proof__stats { border-color: #DCD3C6 }

/* „Jak čísla zlepšit?": pořadí 01–03 v rohu karet, v Plex Mono. */
.tk-info .tk-better__grid { counter-reset: tk-pilir }
.tk-info .tk-pillar { position: relative }
.tk-info .tk-pillar::after {
  counter-increment: tk-pilir; content: counter(tk-pilir, decimal-leading-zero);
  position: absolute; top: 20px; right: 22px;
  font-family: var(--tk-font-data); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; color: var(--tk-stone); font-variant-numeric: tabular-nums;
}
.tk-info .tk-pillar--shop::after { color: var(--tk-dim) }

/* Časté otázky číslované jako ve Studii; řádek se při najetí ohřeje. */
.tk-info .tk-faq { counter-reset: tk-q }
.tk-info .tk-faq__q { justify-content: flex-start; padding-left: var(--tk-s2); padding-right: var(--tk-s2) }
.tk-info .tk-faq__q::before {
  counter-increment: tk-q; content: counter(tk-q, decimal-leading-zero);
  flex: 0 0 34px; font-family: var(--tk-font-data); font-size: 12.5px; font-weight: 500;
  letter-spacing: .06em; color: var(--tk-stone); font-variant-numeric: tabular-nums;
}
.tk-info .tk-faq__q::after { margin-left: auto }
.tk-info .tk-faq__q:hover { background: rgba(255,138,76,.05) }
.tk-info .tk-faq__q[aria-expanded="true"]::before { color: var(--tk-warm-ink) }
.tk-info .tk-faq__a { padding-left: calc(var(--tk-s2) + 34px) }

@media print {
  .tk-hub .tk-hub__hero::after, .tk-info .tk-close::after { display: none }
  .tk-info .tk-proof { background: #FFFFFF; border-color: #999999 }
}

/* =====================================================================
   13 · INTERAKCE – KALKULAČKA JAKO PŘÍSTROJ (13. 10. 2026)
   Postup od údajů k výsledku má být vidět: krok, ve kterém se právě
   píše, se rozsvítí; výsledek po výpočtu plynule vyjede; tlačítko
   má stisk. Při omezeném pohybu vše vypíná blok prefers-reduced-motion.
   ===================================================================== */
/* Jen posun, ne průhlednost: kdyby animace neproběhla (karta na pozadí,
   tisk, zastavený časovač), výsledek musí být vidět i tak. */
@keyframes tk-vysledek { from { transform: translateY(12px) } }
.tk-calculator .tk-result { animation: tk-vysledek 380ms var(--tk-ease) }

/* Aktivní krok: silnější prstenec pólu a nadpis kroku v inkoustu pólu. */
.tk-calculator .tk-step::before {
  transition: box-shadow var(--tk-t) var(--tk-ease), transform var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-step:focus-within::before {
  box-shadow: 0 0 0 6px rgba(255,138,76,.26); transform: scale(1.06);
}
.tk-calculator[data-tk-pole="cold"] .tk-step:focus-within::before,
.tk-calculator[data-tk-pole="cool"] .tk-step:focus-within::before {
  box-shadow: 0 0 0 6px rgba(127,179,204,.34);
}
.tk-calculator .tk-step__title { transition: color var(--tk-t) var(--tk-ease) }
.tk-calculator .tk-step:focus-within .tk-step__title { color: var(--tk-pol-ink) }

/* Tlačítka: stisk o pixel dolů, stín se přitáhne. */
.tk-calculator .tk-button { transition: background-color var(--tk-t) var(--tk-ease),
  box-shadow var(--tk-t) var(--tk-ease), transform var(--tk-t-fast) var(--tk-ease),
  border-color var(--tk-t) var(--tk-ease) }
.tk-calculator .tk-button:active { transform: translateY(1px) }
.tk-calculator .tk-button--primary:active { box-shadow: 0 1px 2px rgba(28,27,26,.12) }
.tk-calculator .tk-button--ghost:hover { border-color: var(--tk-graphite) }

/* Karta rozcestníku: stisk jako tlačítko (celá karta je ovladač). */
.tk-hub.tk-js .tk-box:active { transform: translateY(0) }

/* =====================================================================
   14 · NADPISY SEKCÍ, PILÍŘE A DISKUZE (13. 10. 2026)
   Majitel: štítek a nadpis říkaly skoro totéž („Otázky" / „Časté
   otázky") – zůstal jen nadpis, pod ním osa značky 44 × 2 px jako pod
   nadpisy sekcí webu. Pilíře „Jak čísla zlepšit?" reagují na najetí
   jako karty kalkulaček. Diskuze Shoptetu pod kalkulačkami se
   nezobrazuje (doporučeno ji vypnout i v administraci).
   ===================================================================== */
.tk-info .tk-info__title::after {
  content: ""; display: block; width: 44px; height: 2px; margin-top: 16px;
  border-radius: 1px; background: var(--tk-axis);
}
.tk-info .tk-pillar {
  transition: transform var(--tk-t) var(--tk-ease), box-shadow var(--tk-t) var(--tk-ease),
    border-color var(--tk-t) var(--tk-ease);
}
.tk-info .tk-pillar:hover {
  transform: translateY(-3px); border-color: #CFC6B8;
  box-shadow: 0 3px 6px rgba(28,27,26,.06), 0 20px 40px -18px rgba(177,74,24,.30);
}
.tk-info .tk-pillar .tk-pillar__icon {
  transition: background-color var(--tk-t) var(--tk-ease), color var(--tk-t) var(--tk-ease),
    transform var(--tk-t) var(--tk-ease);
}
.tk-info .tk-pillar:hover .tk-pillar__icon {
  background-color: var(--tk-warm); color: var(--tk-graphite); transform: scale(1.06);
}
.tk-info .tk-pillar--shop:hover { box-shadow: 0 3px 6px rgba(28,27,26,.12), 0 24px 44px -18px rgba(28,27,26,.55) }

body:has(.tk-hub) .discussionContainer,
body:has(.tk-hub) .pageArticleDetail ~ h2 { display: none }

/* =====================================================================
   15 · OTÁZKY JAKO KARTY A NADPISY JAKO NA STUDII (13. 10. 2026)
   Majitel: otázky graficky výš, odpovědi hezky zarovnané, nadpisy
   sekcí stejně na Kalkulačce i Studii. Nadpis sekce je na střed
   s osou pod sebou (jako `.ftp-h2` webu). Každá otázka je karta
   kosti: číslo v kolečku, otázka ve Fraunces, šipka v kolečku.
   Otevřená karta dostane osu na horní hraně a stín; odpověď začíná
   přesně pod textem otázky, oddělená vláskem. Totéž na Studii
   (`.ftp-faq--lux` v `5-showroom/stranky_styl.py`).
   ===================================================================== */
.tk-info .tk-info__title {
  text-align: center; font-variation-settings: 'opsz' 96;
  font-size: clamp(26px, 4.6vw, 40px); text-wrap: balance;
}
.tk-info .tk-info__title::after { margin: 16px auto 0 }
.tk-info .tk-better__lead { text-align: center; margin-left: auto; margin-right: auto }

.tk-info .tk-faq {
  display: grid; gap: var(--tk-s3); max-width: 820px; margin: 0 auto; border-top: 0;
}
.tk-info .tk-faq__item {
  position: relative; overflow: hidden; background: var(--tk-bone);
  border: 1px solid var(--tk-rule); border-radius: var(--tk-r-l); box-shadow: var(--tk-shadow-1);
  transition: border-color var(--tk-t) var(--tk-ease), box-shadow var(--tk-t) var(--tk-ease);
}
.tk-info .tk-faq__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tk-axis); opacity: 0; transition: opacity var(--tk-t) var(--tk-ease);
}
.tk-info .tk-faq__item:hover { border-color: #CFC6B8; box-shadow: var(--tk-shadow-2) }
.tk-info .tk-faq__item:has(.tk-faq__q[aria-expanded="true"]) {
  border-color: #CFC6B8;
  box-shadow: 0 3px 6px rgba(28,27,26,.07), 0 18px 40px -12px rgba(28,27,26,.16);
}
.tk-info .tk-faq__item:has(.tk-faq__q[aria-expanded="true"])::before { opacity: 1 }
.tk-info .tk-faq__q {
  gap: var(--tk-s4); min-height: 76px; padding: 20px 24px;
  font-family: var(--tk-font-display); font-weight: 400; font-variation-settings: 'opsz' 30;
  font-size: clamp(17px, 2.2vw, 19px); line-height: 1.35; letter-spacing: -.005em;
  color: var(--tk-graphite); text-wrap: pretty;
}
.tk-info .tk-faq__q:hover { color: var(--tk-graphite); background: none }
.tk-info .tk-faq__q::before {
  flex: 0 0 32px; width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: #EFE9E0;
  font-size: 12px; letter-spacing: .04em; color: var(--tk-body);
  transition: background-color var(--tk-t) var(--tk-ease), color var(--tk-t) var(--tk-ease);
}
.tk-info .tk-faq__item:hover .tk-faq__q::before { background: var(--tk-warm); color: var(--tk-graphite) }
.tk-info .tk-faq__q[aria-expanded="true"]::before { background: var(--tk-warm); color: var(--tk-graphite) }
.tk-info .tk-faq__q::after {
  flex: 0 0 32px; width: 32px; height: 32px; margin: 0 0 0 auto; box-sizing: border-box;
  border: 1px solid var(--tk-rule); border-radius: 50%; transform: none;
  background: var(--tk-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1B1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform var(--tk-t) var(--tk-ease), background-color var(--tk-t) var(--tk-ease),
    border-color var(--tk-t) var(--tk-ease);
}
.tk-info .tk-faq__q[aria-expanded="true"]::after {
  margin: 0 0 0 auto; transform: rotate(180deg); border-color: var(--tk-graphite);
  background: var(--tk-graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.tk-info .tk-faq__a {
  margin: 0 24px 0 72px; padding: 16px 0 22px; max-width: none;
  border-top: 1px solid var(--tk-rule);
  font-size: 15.5px; line-height: 1.7; color: var(--tk-body); text-wrap: pretty;
}
@media (max-width: 559px) {
  .tk-info .tk-faq__q { gap: var(--tk-s3); padding: 16px }
  .tk-info .tk-faq__q::before { flex-basis: 28px; width: 28px; height: 28px }
  .tk-info .tk-faq__q::after { flex-basis: 28px; width: 28px; height: 28px }
  .tk-info .tk-faq__a { margin: 0 16px; padding: 14px 0 18px; font-size: 15px }
}

/* =====================================================================
   16 · PROČ TOMU VĚŘIT – STEJNĚ JAKO STUDIE (13. 10. 2026)
   Majitel: sekce na obou stránkách stejně, profesionálně a v barvách
   e-shopu. Deska kosti s osou nahoře zůstává; čísla a popisky na
   střed, pod každým číslem ryska (první chladná, poslední teplá),
   „Z čeho vycházíme" s linkami po stranách, jména institucí jako
   tiráž ve Fraunces, odkaz na Studii jako obrysové tlačítko. Studie
   má totéž (`.ftp-proof`), jen bez odkazu.
   ===================================================================== */
.tk-info .tk-proof {
  padding: 48px 20px 40px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(28,27,26,.04);
}
@media (min-width: 760px) { .tk-info .tk-proof { padding: 56px 48px 48px } }
.tk-info .tk-proof .tk-info__title { margin-bottom: 0 }
.tk-info .tk-proof__stats { margin: 32px 0; border-color: #DCD3C6 }
.tk-info .tk-proof__stats li {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-width: 0; padding: 28px 12px; font-size: 14.5px; line-height: 1.45; text-wrap: balance;
}
.tk-info .tk-proof__stats li + li { padding-left: 12px; border-left: 1px solid #DCD3C6 }
@media (max-width: 719px) {
  .tk-info .tk-proof__stats li:nth-child(3) { border-left: 0 }
  .tk-info .tk-proof__stats li:nth-child(n+3) { border-top: 1px solid #DCD3C6 }
}
.tk-info .tk-proof__stats b { margin: 0; font-size: clamp(40px, 5.4vw, 56px) }
.tk-info .tk-proof__stats b::after {
  content: ""; display: block; width: 24px; height: 2px; margin: 16px auto 0;
  border-radius: 1px; background: #CFC6B8;
}
.tk-info .tk-proof__stats li:nth-child(1) b::after { background: var(--tk-cold) }
.tk-info .tk-proof__stats li:nth-child(4) b::after { background: var(--tk-warm) }
.tk-info .tk-proof__label {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 14px; letter-spacing: .16em;
}
.tk-info .tk-proof__label::before, .tk-info .tk-proof__label::after {
  content: ""; width: 48px; height: 1px; background: #CFC6B8;
}
.tk-info .tk-proof__src {
  max-width: 760px; margin: 0 auto;
  font-family: var(--tk-font-display); font-variation-settings: 'opsz' 24;
  font-size: 15.5px; line-height: 1.9; color: var(--tk-graphite); text-wrap: balance;
}
/* Bez teček (v zalomeném řádku stála tečka na začátku) – jména dělí
   jen vzduch a žádné se nerozdělí. */
.tk-info .tk-proof__src { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px }
.tk-info .tk-proof__src span:not(:last-child)::after { content: none }
@media (min-width: 560px) { .tk-info .tk-proof__src span { white-space: nowrap } }
@media (max-width: 559px) { .tk-info .tk-proof__src { gap: 2px 14px; font-size: 13.5px; line-height: 1.75 } }
.tk-info .tk-proof__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; margin: 28px 0 0;
  padding: 0 22px; font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--tk-graphite); border: 1px solid var(--tk-graphite); border-radius: var(--tk-r-pill);
  transition: background-color var(--tk-t) var(--tk-ease), color var(--tk-t) var(--tk-ease);
}
.tk-info .tk-proof__link::after {
  content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor;
  border-right: 2px solid currentColor; transform: rotate(45deg);
}
.tk-info .tk-proof__link:hover { color: var(--tk-bone); background: var(--tk-graphite) }

/* =====================================================================
   17 · UX REVIEW – JEDEN JAZYK KOMPONENT (13. 10. 2026)
   Audit: `UX-AUDIT.md`. (1) Doplňkové karty rozcestníku nesly pól
   na LEVÉ hraně, všechny ostatní karty webu na HORNÍ – sjednoceno.
   (2) Tlačítko „Spočítat" na hlavních kartách mělo 34 px a na mobilu
   stálo v rohu; teď 44 px (dotykový cíl) a na mobilu přes celou šířku.
   (3) „Co výsledek znamená" a „Metodika a zdroje" vypadaly jako
   formulářové pole; teď stejné karty jako Časté otázky (Fraunces,
   šipka v kolečku, otevřená karta se stínem, obsah pod vláskem).
   ===================================================================== */
.tk-hub .tk-box:not(.tk-box--main) {
  padding-left: 24px; border-left: 1px solid var(--tk-rule);
  border-top: 3px solid var(--tk-warm);
}
.tk-hub .tk-box[data-tk-pole="cold"]:not(.tk-box--main),
.tk-hub .tk-box[data-tk-pole="cool"]:not(.tk-box--main) { border-top-color: var(--tk-cold) }
.tk-hub.tk-js .tk-box:not(.tk-box--main):hover,
.tk-hub.tk-js .tk-box[data-tk-pole="cold"]:not(.tk-box--main):hover,
.tk-hub.tk-js .tk-box[data-tk-pole="cool"]:not(.tk-box--main):hover { border-left-color: #CFC6B8 }

.tk-hub .tk-box--main .tk-box__cta { min-height: 44px; padding: 0 20px; font-size: 15px }
@media (max-width: 559px) {
  .tk-hub .tk-box--main .tk-box__cta { width: 100%; justify-content: center; margin-left: 0 }
}

.tk-calculator .tk-method {
  position: relative; overflow: hidden; margin-top: var(--tk-s3);
  background: var(--tk-bone); border-radius: var(--tk-r-l); box-shadow: var(--tk-shadow-1);
  transition: border-color var(--tk-t) var(--tk-ease), box-shadow var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-method:hover { border-color: #CFC6B8 }
.tk-calculator .tk-method:has(.tk-method__toggle[aria-expanded="true"]) {
  border-color: #CFC6B8; box-shadow: var(--tk-shadow-2);
}
.tk-calculator .tk-method__toggle {
  min-height: 60px; padding: 14px 16px 14px 20px; border-radius: var(--tk-r-l);
  font-family: var(--tk-font-display); font-weight: 400; font-variation-settings: 'opsz' 30;
  font-size: 17.5px; line-height: 1.3;
}
.tk-calculator .tk-method__toggle:hover { background: none }
.tk-calculator .tk-method__toggle::after {
  flex: 0 0 32px; width: 32px; height: 32px; margin: 0; box-sizing: border-box;
  border: 1px solid var(--tk-rule); border-radius: 50%; transform: none;
  background: var(--tk-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1B1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform var(--tk-t) var(--tk-ease), background-color var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-method__toggle[aria-expanded="true"]::after {
  margin: 0; transform: rotate(180deg); border-color: var(--tk-graphite);
  background: var(--tk-graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.tk-calculator .tk-method__body { margin: 0 20px; padding: 16px 0 20px; border-top: 1px solid var(--tk-rule) }
@media (max-width: 559px) {
  .tk-calculator .tk-method__toggle { padding: 12px 14px 12px 16px; font-size: 16.5px }
  .tk-calculator .tk-method__body { margin: 0 16px }
}

/* =====================================================================
   18 · ZKOPÍROVAT VÝSLEDEK (14. 10. 2026)
   Majitel: jediné tlačítko, „ať tam není milion tlačítek" – kdo chce
   výsledek poslat, vloží ho do e-mailu sám. Tlačítko staví skript
   v bloku 7 (editor by prázdný prvek smazal) pod výsledkem každé
   kalkulačky; ukáže se jen s platným výsledkem. Kopíruje název
   kalkulačky, zadané údaje, výsledek, upozornění a adresu.
   „Zkopírováno" jen po skutečném zkopírování; jinak text označí
   („Označeno · Ctrl+C").
   ===================================================================== */
.tk-calculator .tk-copy {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--tk-s2);
  margin: var(--tk-s3) 0 0; padding: 0;
}
.tk-calculator .tk-copy[hidden] { display: none }
.tk-calculator .tk-copy__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0;
  padding: 0 18px 0 16px; font-family: var(--tk-font-ui); font-size: 14.5px; font-weight: 600;
  line-height: 1.2; letter-spacing: normal; text-transform: none; color: var(--tk-graphite);
  background: var(--tk-bone); border: 1px solid var(--tk-rule); border-radius: var(--tk-r-pill);
  box-shadow: var(--tk-shadow-1); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color var(--tk-t) var(--tk-ease), box-shadow var(--tk-t) var(--tk-ease),
    background-color var(--tk-t) var(--tk-ease);
}
.tk-calculator .tk-copy__btn::before {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tk-calculator .tk-copy__btn:hover { border-color: var(--tk-graphite); box-shadow: var(--tk-shadow-2) }
.tk-calculator .tk-copy__btn:focus-visible { outline: none; box-shadow: var(--tk-focus) }
.tk-calculator .tk-copy__text {
  display: block; width: 100%; margin: 0; padding: var(--tk-s3);
  font-family: var(--tk-font-data); font-size: 13px; line-height: 1.55; color: var(--tk-graphite);
  background: #FFFFFF; border: 1px solid var(--tk-rule); border-radius: var(--tk-r-m); resize: vertical;
}
@media (max-width: 559px) {
  .tk-calculator .tk-copy__btn { width: 100%; justify-content: center }
}
@media print { .tk-calculator .tk-copy { display: none } }

@media (prefers-reduced-motion: reduce) {
  .tk-calculator *, .tk-calculator *::before, .tk-calculator *::after,
  .tk-hub, .tk-hub *, .tk-hub *::before, .tk-hub *::after,
  .tk-info *, .tk-info *::before, .tk-info *::after {
    transition: none !important; animation: none !important;
  }
}
@media print {
  .tk-hub .tk-hub__hero { color: #333333; background: #FFFFFF; border: 1px solid #999999 }
  .tk-hub .tk-hub__title { color: #000000 }
  .tk-hub .tk-hub__eyebrow, .tk-hub .tk-hub__lead, .tk-hub .tk-hub__facts,
  .tk-hub .tk-hub__scale, .tk-hub .tk-hub__scale span:first-child,
  .tk-hub .tk-hub__scale span:last-child { color: #333333 }
  .tk-hub .tk-hub__grid { margin-top: var(--tk-s3) }
  .tk-hub .tk-box { box-shadow: none; border-color: #999999 }
  .tk-hub .tk-box__cta, .tk-hub .tk-hub__panel::before { display: none }
  .tk-hub .tk-hub__panel { animation: none }
  .tk-hub.tk-js .tk-box__cta { display: none }
  .tk-calculator { box-shadow: none; border-color: #999999 }
  .tk-calculator .tk-result { color: #000000; background: #FFFFFF;
    border: 1px solid #999999; box-shadow: none }
  .tk-calculator .tk-result__value,
  .tk-calculator .tk-tile__value,
  .tk-calculator .tk-result__note b { color: #000000 }
  .tk-calculator .tk-result__label,
  .tk-calculator .tk-result__calc,
  .tk-calculator .tk-tile__label,
  .tk-calculator .tk-tile__calc,
  .tk-calculator .tk-result__foot,
  .tk-calculator .tk-result__note,
  .tk-calculator .tk-result__unit,
  .tk-calculator .tk-draft { color: #333333 }
  /* Prohlížeče při tisku vynechají pozadí – světlý text by zmizel. */
  .tk-calculator .tk-gauge__mark--ref::after, .tk-calculator .tk-result__est::before { color: #333333 }
  .tk-calculator .tk-gauge__mark--ref { border-color: #333333 }
  .tk-calculator .tk-tile { border-color: #999999 }
  .tk-calculator .tk-gauge::before { border: 1px solid #333333 }
  .tk-calculator .tk-gauge::after, .tk-calculator .tk-result__est { color: #333333 }
  .tk-calculator[data-tk-calc] .tk-gauge::after { border-color: #333333 }
  .tk-calculator[data-tk-pole] .tk-result__label { color: #333333 }
  .tk-calculator::before { display: none }
  .tk-calculator .tk-draft { border-color: #999999 }
  .tk-calculator .tk-draft b { color: #000000 }
  .tk-calculator .tk-draft::before { color: #000000; background: none; border: 1px solid #333333 }
  .tk-calculator .tk-gauge i::before, .tk-calculator .tk-gauge i::after { color: #333333 }
  .tk-calculator .tk-actions, .tk-calculator .tk-switch,
  .tk-calculator .tk-help, .tk-calculator .tk-method__toggle::after { display: none }
  .tk-calculator .tk-method__body[hidden],
  .tk-calculator .tk-help__body[hidden],
  .tk-info .tk-faq__a[hidden] { display: block }
  .tk-info .tk-close__actions { display: none }
  .tk-info .tk-close, .tk-info .tk-pillar--shop { background: #FFFFFF; border: 1px solid #999999 }
  .tk-info .tk-close__title, .tk-info .tk-pillar--shop .tk-pillar__title { color: #000000 }
  .tk-info .tk-close__text, .tk-info .tk-pillar--shop .tk-pillar__text { color: #333333 }
}