@charset "UTF-8";
/* ==========================================================================
   Kryptopříručka: stránky návodů.

   Jedna sloupcová sazba na tmavém podkladu. Na rozdíl od druhého a třetího
   webu v síti tu není žádný bočný sloupec: obsah stránky drží vodorovná
   lepivá lišta pod tabulí, text běží v jednom středovém sloupci a datové
   bloky (ticker, tabulky, obrázky, kalkulačky) se z něj roztahují na celou
   šíři listu.

   Barvy, rejstříky a tři řezy písma pochází z dětského tématu
   astra-child-burza, které je zapisuje do :root. Hodnoty níž v .kp-list jsou
   jen záloha pro případ, že by stránka vyšla bez tématu (náhled, export).

   Kontrast proti panelu #161B22: --kp-ink 12.9:1, --kp-ink-2 6.6:1,
   --kp-amber 7.4:1, --kp-amber-2 9.9:1, --kp-green 5.6:1, --kp-red 4.9:1.
   --kp-violet měří 4.3:1, takže se používá jen na velké číslice tickeru
   a nikdy na běžný text.
   ========================================================================== */

.kp-list {
  --kp-bg: #0D1117;
  --kp-panel: #161B22;
  --kp-panel-2: #1C232C;
  --kp-line: #2A3441;
  --kp-ink: #E6EDF3;
  --kp-ink-2: #9DAAB8;
  --kp-amber: #F7931A;
  --kp-amber-2: #FFB454;
  --kp-green: #3FB950;
  --kp-red: #F8614A;
  --kp-violet: #A371F7;
  --kp-line-2: #5E6E80;
  --kp-radius: 10px;
  --kp-radius-s: 6px;
  --kp-head-face: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --kp-body-face: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --kp-mono-face: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Jedna šířka pro celou stránku.

     Dřív tu stála míra čtení asi sedmdesáti znaků, zatímco tabule, tabulky a obrázky se z ní
     roztahovaly na celý list. Na 1920 px měl odstavec 748 px a tabule 1240, takže text končil
     o 492 px dřív než všechno ostatní pod ním a vedle něj zůstal prázdný pruh: na pohled jako by
     byl text odsunutý doleva. Odstavec, nadpis, obrázek, tabulka i tabule proto drží jednu šířku
     a stojí mezi týmiž dvěma pravítky. Šířku listu určuje téma, tady se jen vyplní. */
  --kp-mira: 100%;
  --kp-mezera: clamp(28px, 3.4vw, 46px);

  color: var(--kp-ink);
  font-family: var(--kp-body-face);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.075rem);
  line-height: 1.68;
}

/* Nic uvnitř listu nesmí vyjet z okna: ani dlouhá adresa, ani široká tabulka. */
.kp-list,
.kp-list * {
  min-width: 0;
  max-width: 100%;
}
.kp-list {
  overflow-wrap: break-word;
}

/* ==========================================================================
   1. Cesta: dva kroky, Domů › stránka
   ========================================================================== */

.kp-cesta {
  font-family: var(--kp-mono-face);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--kp-ink-2);
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--kp-line);
}
.kp-cesta ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
}
.kp-cesta li {
  margin: 0;
}
.kp-cesta li + li::before {
  content: "›";
  color: var(--kp-line-2);
  margin-right: 0.5em;
}
.kp-cesta a {
  color: var(--kp-amber-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 180, 84, 0.35);
}
.kp-cesta a:hover,
.kp-cesta a:focus-visible {
  color: var(--kp-amber);
  border-bottom-color: var(--kp-amber);
}
.kp-cesta [aria-current="page"] {
  color: var(--kp-ink);
}

/* ==========================================================================
   2. Záhlaví: datum, H1, perex, řádek razítek
   ========================================================================== */

.kp-zahlavi {
  margin: 0 0 var(--kp-mezera);
}
.kp-zahlavi__datum {
  font-family: var(--kp-mono-face);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kp-amber);
  margin: 0 0 12px;
}
.kp-zahlavi h1 {
  font-family: var(--kp-head-face);
  font-weight: 700;
  font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.kp-zahlavi__perex {
  font-size: clamp(1.08rem, 1rem + 0.42vw, 1.3rem);
  line-height: 1.58;
  color: var(--kp-ink);
  margin: 0;
}
.kp-zahlavi__perex strong {
  color: var(--kp-amber-2);
  font-weight: 600;
}

/* Razítka: mono štítky s vlasovým rámem, bez výplně. */
.kp-zahlavi__znacky {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
}
.kp-znacka {
  font-family: var(--kp-mono-face);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kp-ink-2);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius-s);
  padding: 5px 9px;
  background: var(--kp-panel);
}
.kp-znacka--kurz {
  color: var(--kp-amber-2);
  border-color: rgba(247, 147, 26, 0.45);
}
.kp-znacka--vek {
  color: var(--kp-bg);
  background: var(--kp-amber);
  border-color: var(--kp-amber);
  font-weight: 700;
}

/* ==========================================================================
   3. Tabule: žebříček na celou šíři listu
   ========================================================================== */

.kp-tabule {
  margin: 0 0 var(--kp-mezera);
}
.kp-tabule > .kt-tabule {
  margin-top: 0;
}

/* ==========================================================================
   4. Lišta: obsah stránky

   Byla to jedna vodorovná lepivá řada buněk, co se posouvala do strany.
   Osm až devět českých nadpisů měří dohromady asi 1 500 px a list má 1 208,
   takže na každé šířce stála pod lištou posuvná lišta prohlížeče, od šestého
   odkazu dál se nečetlo nic a popisek vlevo se odřízl. Teď se řada zalamuje:
   co se nevejde, jde na druhý řádek, nikam se neposouvá a nic se neřeže.

   Zůstal po ní jen pruh mezi dvěma vlasovými pravítky. Žádné pozadí, žádné
   rámečky kolem odkazů, žádná vnitřní mezera po stranách: obsah začíná na
   levém pravítku listu stejně jako odstavec nad ním. Odsazení mají jen věci
   s vlastní hranou, tedy dlaždice, buňka tabulky a rám obrázku.
   ========================================================================== */

.kp-lista {
  margin: 0 0 var(--kp-mezera);
  padding: 15px 0 16px;
  border-top: 1px solid var(--kp-line);
  border-bottom: 1px solid var(--kp-line);
}
.kp-lista__nazev {
  font-family: var(--kp-mono-face);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kp-amber);
  margin: 0 0 11px;
}
.kp-lista ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 28px;
  margin: 0;
  padding: 0;
  counter-reset: kp-lista;
}
.kp-lista li {
  margin: 0;
  counter-increment: kp-lista;
}
/* Prose further down paints every link amber and underlines it. Eight of those in one row would
   read as eight warnings, so the contents keeps the quieter ink and earns its underline on the
   pointer. The pair of class names is what gets past .kp-list a, which is written later. */
.kp-list .kp-lista a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--kp-ink-2);
  text-decoration: none;
}
.kp-list .kp-lista a::before {
  content: counter(kp-lista, decimal-leading-zero);
  font-family: var(--kp-mono-face);
  font-size: 0.72rem;
  color: var(--kp-line-2);
}
.kp-list .kp-lista a:hover,
.kp-list .kp-lista a:focus-visible {
  color: var(--kp-amber-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kp-list .kp-lista a:hover::before,
.kp-list .kp-lista a:focus-visible::before {
  color: var(--kp-amber);
}

/* Lišta se už nelepí, takže nadpis z ní nemá co zastrčit. Odstup zbyl jen
   proto, aby cílový nadpis neskončil nalepený na horní hraně okna. */
.kp-list [id] {
  scroll-margin-top: 24px;
}
.admin-bar .kp-list [id] {
  scroll-margin-top: 56px;
}

/* ==========================================================================
   5. Tělo: jeden středový sloupec, datové bloky přes celý list
   ========================================================================== */

.kp-telo {
  margin: 0;
}
.kp-blok {
  display: block;
  margin: 0 0 var(--kp-mezera);
  padding: 0;
}
.kp-blok + .kp-blok {
  border-top: 1px solid var(--kp-line);
  padding-top: var(--kp-mezera);
}

/* Text se drží míry čtení a stojí u levého pravítka listu. */
.kp-blok > p,
.kp-blok > h2,
.kp-blok > h3,
.kp-blok > ul,
.kp-blok > ol,
.kp-blok > dl,
.kp-blok > blockquote,
.kp-blok > .kp-blok__cislo,
.kp-blok > .kp-poznamka,
.kp-blok > .kp-vzorec {
  max-width: var(--kp-mira);
  margin-left: 0;
  margin-right: auto;
}

/* Datové bloky míru přerůstají. */
.kp-blok > .kp-ticker,
.kp-blok > .kp-figura,
.kp-blok > .kp-tabulka,
.kp-blok > .kp-kalkulacka,
.kp-blok > .kp-dotazy,
.kp-blok > .kp-dal__seznam,
.kp-blok > .kp-plne {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Číslo oddílu: mono, jantar, stojí nad H2. */
.kp-blok__cislo {
  font-family: var(--kp-mono-face);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--kp-amber);
  margin: 0 auto 10px 0;
}
.kp-blok > h2 {
  font-family: var(--kp-head-face);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.14rem + 1.1vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 auto 16px 0;
  text-wrap: balance;
}
.kp-blok > h3 {
  font-family: var(--kp-head-face);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.3;
  margin: 1.8em auto 0.6em 0;
  color: var(--kp-ink);
}
.kp-blok > p {
  margin: 0 auto 1.05em 0;
}
.kp-blok > p:last-child {
  margin-bottom: 0;
}
.kp-list strong {
  font-weight: 600;
  color: var(--kp-ink);
}
.kp-list a {
  color: var(--kp-amber-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
}
.kp-list a:hover,
.kp-list a:focus-visible {
  color: var(--kp-amber);
  text-decoration-thickness: 2px;
}

/* Odrážky: mono odrážka místo kolečka. */
.kp-blok > ul {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.05em 0;
}
.kp-blok > ul > li {
  position: relative;
  padding-left: 1.5em;
  margin: 0 0 0.6em;
}
.kp-blok > ul > li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--kp-mono-face);
  color: var(--kp-amber);
}
.kp-blok > ol {
  padding-left: 1.4em;
  margin: 0 auto 1.05em 0;
}
.kp-blok > ol > li {
  margin: 0 0 0.6em;
}
.kp-blok > ol > li::marker {
  font-family: var(--kp-mono-face);
  color: var(--kp-amber);
}

/* Vzorec ve větě: mono řádek na vsazené ploše. */
.kp-vzorec {
  font-family: var(--kp-mono-face);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--kp-ink);
  background: var(--kp-panel-2);
  border-left: 3px solid var(--kp-amber);
  border-radius: 0 var(--kp-radius-s) var(--kp-radius-s) 0;
  padding: 11px 14px;
  margin: 0 auto 1.05em 0;
  overflow-x: auto;
}

/* Poznámka na okraj: vsazená plocha, žádná karta. */
.kp-poznamka {
  background: var(--kp-panel-2);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius-s);
  padding: 14px 16px;
  margin: 0 auto 1.05em 0;
  font-size: 0.95rem;
  color: var(--kp-ink-2);
}
.kp-poznamka > :first-child {
  margin-top: 0;
}
.kp-poznamka > :last-child {
  margin-bottom: 0;
}
.kp-poznamka strong {
  color: var(--kp-amber-2);
}

/* ==========================================================================
   6. Ticker: řádek mono číslic na panelu, svislá pravítka mezi nimi
   ========================================================================== */

.kp-ticker {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  background: var(--kp-panel);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  margin: 0 0 1.4em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--kp-line-2) transparent;
}
.kp-ticker::-webkit-scrollbar {
  height: 4px;
}
.kp-ticker::-webkit-scrollbar-thumb {
  background: var(--kp-line-2);
}
.kp-ticker__pole {
  flex: 1 1 10rem;
  min-width: 10rem;
  padding: 15px 18px;
  border-left: 1px solid var(--kp-line);
  scroll-snap-align: start;
}
.kp-ticker__pole:first-child {
  border-left: 0;
}
.kp-ticker__cislo {
  display: block;
  font-family: var(--kp-mono-face);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--kp-amber);
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.kp-ticker__pole--krypto .kp-ticker__cislo {
  color: var(--kp-violet);
}
.kp-ticker__pole--dobre .kp-ticker__cislo {
  color: var(--kp-green);
}
.kp-ticker__pole--chybi .kp-ticker__cislo {
  color: var(--kp-red);
}
.kp-ticker__popis {
  display: block;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--kp-ink-2);
}

/* ==========================================================================
   7. Figura: panel s mono patkou, ve které stojí zdroj
   ========================================================================== */

.kp-figura {
  background: var(--kp-panel);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  margin: 0 0 1.4em;
  padding: 0;
  overflow: hidden;
}
.kp-figura img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--kp-line);
}
.kp-figura figcaption {
  padding: 14px 18px 12px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--kp-ink);
}
.kp-figura__zdroj {
  margin: 0;
  padding: 9px 18px 11px;
  border-top: 1px solid var(--kp-line);
  background: var(--kp-panel-2);
  font-family: var(--kp-mono-face);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--kp-ink-2);
}
.kp-figura__zdroj a {
  color: var(--kp-ink-2);
}
.kp-figura__zdroj a:hover {
  color: var(--kp-amber-2);
}

/* ==========================================================================
   8. Tabulky: celá šíře listu, mono číslice, svislá pravítka, žádné zebry
   ========================================================================== */

.kp-tabulka {
  margin: 0 0 1.4em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: var(--kp-panel);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  scrollbar-width: thin;
  scrollbar-color: var(--kp-line-2) transparent;
}
.kp-tabulka::-webkit-scrollbar {
  height: 4px;
}
.kp-tabulka::-webkit-scrollbar-thumb {
  background: var(--kp-line-2);
}
.kp-tabulka table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: transparent;
  font-size: 0.93rem;
}
.kp-tabulka caption {
  caption-side: top;
  text-align: left;
  padding: 14px 18px 10px;
  font-family: var(--kp-mono-face);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kp-amber);
  border-bottom: 1px solid var(--kp-line);
}
.kp-tabulka th,
.kp-tabulka td {
  padding: 11px 16px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--kp-line);
  background: transparent; /* žádné zebry */
}
.kp-tabulka th + th,
.kp-tabulka td + td,
.kp-tabulka th + td,
.kp-tabulka td + th {
  border-left: 1px solid var(--kp-line);
}
.kp-tabulka thead th {
  font-family: var(--kp-mono-face);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kp-ink-2);
  border-bottom: 1px solid var(--kp-line-2);
  white-space: nowrap;
}
.kp-tabulka tbody th {
  font-weight: 600;
  color: var(--kp-ink);
}
.kp-tabulka tbody tr:last-child th,
.kp-tabulka tbody tr:last-child td {
  border-bottom: 0;
}
.kp-tabulka tfoot td,
.kp-tabulka tfoot th {
  border-top: 1px solid var(--kp-line-2);
  font-size: 0.85rem;
  color: var(--kp-ink-2);
}
/* Číselné sloupce: mono, tabulkové číslice, zarovnané vpravo. Selektor musí být aspoň tak
   určitý jako .kp-tabulka td výš, jinak by si buňka vzala zarovnání vlevo odtamtud. */
.kp-num {
  font-family: var(--kp-mono-face);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kp-tabulka th.kp-num,
.kp-tabulka td.kp-num {
  text-align: right;
}
.kp-ano {
  color: var(--kp-green);
}
.kp-ne {
  color: var(--kp-red);
}

/* ==========================================================================
   9. Otázky: dvousloupcový <dl>, otázka v mono, odpověď pod ní

   Sloupce kreslí vícesloupcová sazba, ne mřížka: v mřížce by otázka stála
   vedle odpovědi, kdežto tady každá dvojice drží pohromadě a odpověď stojí
   pod svou otázkou, jak to má návod mít. break-after na <dt> brání tomu,
   aby se otázka utrhla na konec sloupce a odpověď začala v tom druhém.
   ========================================================================== */

.kp-dotazy {
  columns: 2;
  column-gap: 34px;
  column-rule: 1px solid var(--kp-line);
  margin: 0;
  padding: 22px 0 4px;
  border-top: 2px solid var(--kp-line-2);
}
.kp-dotazy > dt {
  font-family: var(--kp-mono-face);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--kp-amber-2);
  margin: 0 0 7px;
  break-after: avoid;
  break-inside: avoid;
  page-break-after: avoid;
}
.kp-dotazy > dd {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--kp-ink);
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--kp-line);
  break-inside: avoid;
}
.kp-dotazy > dd:last-of-type {
  border-bottom: 0;
}
.kp-dotazy > dd > :first-child {
  margin-top: 0;
}
.kp-dotazy > dd > :last-child {
  margin-bottom: 0;
}
@media (max-width: 782px) {
  .kp-dotazy {
    columns: 1;
    padding: 18px 0 0;
  }
}

/* ==========================================================================
   10. Kam dál
   ========================================================================== */

.kp-dal__seznam {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--kp-line);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  overflow: hidden;
}
.kp-dal__seznam > li {
  margin: 0;
}
.kp-dal__seznam > li::before {
  content: none;
}
.kp-dal__seznam a {
  display: block;
  height: 100%;
  padding: 16px 18px;
  background: var(--kp-panel);
  text-decoration: none;
  color: var(--kp-ink);
}
.kp-dal__seznam a:hover,
.kp-dal__seznam a:focus-visible {
  background: var(--kp-panel-2);
}
.kp-dal__seznam strong {
  display: block;
  font-family: var(--kp-head-face);
  font-weight: 700;
  font-size: 1rem;
  color: var(--kp-amber-2);
  margin: 0 0 5px;
}
.kp-dal__seznam a:hover strong {
  color: var(--kp-amber);
}
.kp-dal__seznam span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--kp-ink-2);
}

/* ==========================================================================
   11. Péče: linka pomoci a zákonné varování
   ========================================================================== */

.kp-pece {
  padding: 22px 0 0;
  border-top: 2px solid var(--kp-amber);
}
.kp-pece > .kp-blok__cislo,
.kp-pece > h2,
.kp-pece > p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.kp-pece__zakon {
  font-family: var(--kp-head-face);
  font-weight: 700;
  font-size: clamp(1rem, 0.96rem + 0.28vw, 1.14rem);
  line-height: 1.45;
  color: var(--kp-amber-2);
  margin: 0 0 12px;
}
.kp-pece__vek {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--kp-ink);
  margin: 0 0 10px;
}
.kp-pece__vek b {
  flex: 0 0 auto;
  font-family: var(--kp-mono-face);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kp-bg);
  background: var(--kp-amber);
  border-radius: var(--kp-radius-s);
  padding: 3px 7px;
}
.kp-pece__linka {
  font-size: 0.95rem;
  color: var(--kp-ink-2);
  margin: 0;
}
.kp-pece__linka strong,
.kp-pece__linka a.kp-pece__cislo {
  font-family: var(--kp-mono-face);
  font-weight: 700;
  font-size: 1.05em;
  color: var(--kp-green);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ==========================================================================
   12. Kalkulačka. Prázdný div.kp-kalkulacka[data-nastroj] vyplní calc.js;
       než se skript spustí, je na stránce jen panel s popiskem.
   ========================================================================== */

.kp-kalkulacka {
  background: var(--kp-panel);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  margin: 0 0 1.4em;
  overflow: hidden;
}
.kp-kalkulacka:empty::before {
  content: "Kalkulačka se načítá; potřebuje zapnutý JavaScript.";
  display: block;
  padding: 18px;
  font-family: var(--kp-mono-face);
  font-size: 0.8rem;
  color: var(--kp-ink-2);
}
.kp-kalkulacka__hlava {
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--kp-line);
}
.kp-kalkulacka__nazev {
  font-family: var(--kp-mono-face);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kp-amber);
  margin: 0 0 5px;
}
.kp-kalkulacka__popis {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--kp-ink-2);
  margin: 0;
}
.kp-kalkulacka__telo {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
}
@media (max-width: 860px) {
  .kp-kalkulacka__telo {
    grid-template-columns: minmax(0, 1fr);
  }
}
.kp-kalkulacka__pole {
  padding: 16px 18px;
  border-right: 1px solid var(--kp-line);
  background: var(--kp-panel-2);
}
@media (max-width: 860px) {
  .kp-kalkulacka__pole {
    border-right: 0;
    border-bottom: 1px solid var(--kp-line);
  }
}
.kp-kalkulacka__radek {
  display: block;
  margin: 0 0 13px;
}
.kp-kalkulacka__radek:last-child {
  margin-bottom: 0;
}
.kp-kalkulacka__term {
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--kp-ink);
  margin: 0 0 5px;
}
.kp-kalkulacka__term small {
  display: block;
  font-size: 0.74rem;
  color: var(--kp-ink-2);
  margin-top: 2px;
}
.kp-kalkulacka__vstup {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--kp-line-2);
  border-radius: var(--kp-radius-s);
  background: var(--kp-bg);
  overflow: hidden;
}
.kp-kalkulacka__vstup:focus-within {
  border-color: var(--kp-amber);
  box-shadow: 0 0 0 2px rgba(247, 147, 26, 0.3);
}
.kp-kalkulacka__vstup input,
.kp-kalkulacka__vstup select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--kp-ink);
  font-family: var(--kp-mono-face);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  border-radius: 0;
}
.kp-kalkulacka__vstup input:focus,
.kp-kalkulacka__vstup select:focus {
  outline: none;
  box-shadow: none;
}
.kp-kalkulacka__vstup select {
  font-family: var(--kp-body-face);
}
.kp-kalkulacka__jednotka {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-family: var(--kp-mono-face);
  font-size: 0.78rem;
  color: var(--kp-ink-2);
  background: var(--kp-panel);
  border-left: 1px solid var(--kp-line);
}
.kp-kalkulacka__jednotka--pred {
  border-left: 0;
  border-right: 1px solid var(--kp-line);
}
.kp-kalkulacka__vysledek {
  padding: 16px 18px;
}
.kp-kalkulacka__hlavni {
  display: block;
  margin: 0 0 14px;
}
.kp-kalkulacka__stitek {
  display: block;
  font-family: var(--kp-mono-face);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kp-ink-2);
  margin: 0 0 4px;
}
.kp-kalkulacka__suma {
  display: block;
  font-family: var(--kp-mono-face);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--kp-amber);
}
.kp-kalkulacka__suma--slovo {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
  letter-spacing: 0;
  line-height: 1.25;
}
.kp-kalkulacka--dobre .kp-kalkulacka__suma {
  color: var(--kp-green);
}
.kp-kalkulacka--zle .kp-kalkulacka__suma {
  color: var(--kp-red);
}
.kp-kalkulacka--krypto .kp-kalkulacka__suma {
  color: var(--kp-violet);
}
.kp-kalkulacka__stav {
  display: block;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--kp-ink-2);
  margin-top: 6px;
}
.kp-kalkulacka__rozpis {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  border-top: 1px solid var(--kp-line);
}
.kp-kalkulacka__rozpis li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--kp-line);
  font-size: 0.88rem;
  color: var(--kp-ink-2);
  margin: 0;
}
.kp-kalkulacka__rozpis li::before {
  content: none;
}
.kp-kalkulacka__rozpis b {
  font-family: var(--kp-mono-face);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--kp-ink);
  white-space: nowrap;
}
.kp-kalkulacka__vzorec {
  margin: 0;
  padding: 11px 13px;
  background: var(--kp-panel-2);
  border-left: 3px solid var(--kp-amber);
  border-radius: 0 var(--kp-radius-s) var(--kp-radius-s) 0;
  font-family: var(--kp-mono-face);
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--kp-ink);
  overflow-x: auto;
}
.kp-kalkulacka__vzorec span {
  display: block;
  white-space: nowrap;
}

/* ==========================================================================
   13. Úzká okna
   ========================================================================== */

/* Míra je teď jedna na všech šířkách, takže tu po ní nic přepisovat nezbylo. */
@media (max-width: 782px) {
  .kp-figura figcaption,
  .kp-kalkulacka__pole,
  .kp-kalkulacka__vysledek,
  .kp-kalkulacka__hlava {
    padding-left: 14px;
    padding-right: 14px;
  }
  .kp-tabulka th,
  .kp-tabulka td,
  .kp-tabulka caption {
    padding-left: 13px;
    padding-right: 13px;
  }
  .kp-pece {
    padding: 18px 0 0;
  }
}

@media (max-width: 400px) {
  .kp-lista__nazev {
    font-size: 0.64rem;
  }
  .kp-lista ol {
    gap: 7px 20px;
  }
  .kp-list .kp-lista a {
    font-size: 0.89rem;
  }
  .kp-ticker__pole {
    min-width: 8.5rem;
    padding: 13px 14px;
  }
  .kp-tabulka table {
    min-width: 30rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kp-list * {
    scroll-behavior: auto !important;
  }
}

@media print {
  .kp-lista,
  .kp-tabule {
    display: none;
  }
  .kp-list {
    color: #000;
  }
}

/* Astra indents every ul and ol inside .entry-content by 20px, which a bullet list wants and a row
   of chips, stamps or links does not: without this, every component list would start 20px to the
   right of the prose above it. Bare lists keep the indent for their markers; ours give it back. */
.kp-list ul[class],
.kp-list ol[class],
.kp-cesta ol,
.kp-cesta ul { padding-left: 0; }
.kp-blok ul:not([class]),
.kp-blok ol:not([class]) { padding-left: 20px; }