/* ===========================================================================
   Vzhled interaktivních prvků kurzu.
   Barvy si bere z branding.css — tady se nic barevného needituje.
   =========================================================================== */

/* =========================================================================
   GEOMETRIE STRÁNKY

   Text se drží v úzkém sloupci — delší řádek se hůř čte a kurz se čte dlouho.
   Čtyři hodnoty níže řídí celé rozvržení; měnit stačí je.
   ========================================================================= */
:root {
  --kurz-blok:   84rem;    /* šířka celku: menu + mezera + text            */
  --kurz-menu:   12.1rem;  /* šířka levého menu (dáno šablonou Material)   */
  --kurz-mezera:  4rem;    /* mezera mezi menu a textem                    */
  --kurz-text:   43rem;    /* šířka čtecího sloupce                        */
}

.md-content__inner { max-width: var(--kurz-text); margin-inline: auto; padding-top: .4rem; }
.md-grid { max-width: var(--kurz-blok); }

@media screen and (min-width: 76.25em) {
  .md-content { padding-left: var(--kurz-mezera); }

  /* Zápatí zarovnané přesně pod čtecí sloupec.
     Zbytek = volné místo, které po sloupci uvnitř bloku zůstane, půl na každou stranu. */
  .md-footer__inner {
    --zbytek: calc((var(--kurz-blok) - var(--kurz-menu) - var(--kurz-mezera) - var(--kurz-text)) / 2);
    max-width: var(--kurz-blok);
    padding-left: calc(var(--kurz-menu) + var(--kurz-mezera) + var(--zbytek));
    padding-right: var(--zbytek);
  }
}

.md-typeset { font-size: .8rem; line-height: 1.72; }
.md-typeset h1 { font-weight: 700; letter-spacing: -.02em; font-size: 1.8rem;
  margin-bottom: .3em; }
.md-typeset h2, .md-typeset h3 { font-weight: 700; letter-spacing: -.01em; }
.md-typeset h2 { margin-top: 2.4em; padding-bottom: .3em; border-bottom: 1px solid var(--su-linka); }
.md-typeset p { hyphens: auto; }
.md-header__title { font-weight: 700; }
.md-header { box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.md-footer-meta { background: var(--su-cerna); }

/* -------------------------------------------- ukazatel postupu modulem --- */
.k-postup { position: sticky; top: 0; z-index: 3; margin: 0 0 1.6rem;
  background: var(--su-pozadi); padding: .55rem 0 .5rem; }
.k-postup__hlava { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--su-seda); margin-bottom: .35rem; }
.k-postup__hlava b { color: var(--su-cervena); font-weight: 700; }
.k-postup__drah { height: 3px; background: var(--su-linka); border-radius: 3px; overflow: hidden; }
.k-postup__drah i { display: block; height: 100%; width: 0; background: var(--su-cervena);
  transition: width .12s linear; }

/* ------------------------------------------- velké tlačítko další modul --- */
.md-footer { background: var(--su-pozadi); border-top: 1px solid var(--su-linka); }
.md-footer__inner { max-width: var(--kurz-text); margin-inline: auto; gap: .8rem;
  display: flex; padding: 1.4rem .8rem; }
.md-footer__link { opacity: 1; padding: 0; margin: 0; flex: 1 1 0; align-items: center; }
.md-footer__title { color: var(--su-cerna); font-size: .85rem; line-height: 1.4;
  padding: 0 .6rem; }
.md-footer__direction { color: var(--su-seda); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; opacity: 1; }
.md-footer__link svg { fill: var(--su-seda); }

/* předchozí = nenápadné, další = hlavní akce */
.md-footer__link--prev { border: 1px solid var(--su-linka); border-radius: 8px;
  padding: .7rem .5rem; }
.md-footer__link--prev:hover { background: var(--su-pozadi-2); }
.md-footer__link--next { background: var(--su-cervena); border-radius: 8px;
  padding: .7rem .5rem; }
.md-footer__link--next:hover { background: var(--su-cervena-tmava); }
.md-footer__link--next .md-footer__title,
.md-footer__link--next .md-footer__direction { color: #fff; }
.md-footer__link--next svg { fill: #fff; }
@media (max-width: 600px) { .md-footer__inner { flex-direction: column; } }

/* Logo v hlavičce.
   Manuál (kap. 1.10) zakazuje značku přebarvovat a kap. 1.9 předepisuje
   základní značku na světlém podkladu. Na červené liště proto logo sedí
   na bílém poli v původních barvách — NEPŘEBARVUJEME ho filtrem. */
.md-header__button.md-logo { background: #fff; border-radius: 5px;
  padding: .28rem .5rem; margin-right: .5rem; line-height: 0; }
.md-header__button.md-logo img { height: 1.15rem; width: auto; filter: none; }

/* =========================================================================
   RYTMUS STRÁNKY
   Text se střídá s prázdnem, aby modul nepůsobil jako jeden dlouhý blok.
   ========================================================================= */

.md-typeset h2 { margin-top: 3.4em; }
.md-typeset h3 { margin-top: 2.4em; }
.md-typeset hr { margin: 3.6em 0; border-color: var(--su-linka); }

/* --------------------------------------------------------- ::: statement --- */
/* Velká otázka nebo tvrzení, které rozbije dlouhý text. */
.blok--statement { margin: 3.4rem 0; padding: 0 0 0 1.4rem;
  border-left: 4px solid var(--su-cervena); }
.blok--statement p { font-family: var(--su-pismo-nadpis);
  font-size: 1.5rem; line-height: 1.28; font-weight: 700;
  letter-spacing: -.02em; color: var(--su-cervena); margin: 0; }
.blok--statement p + p { margin-top: .5rem; font-size: .85rem; font-weight: 400;
  color: var(--su-seda); letter-spacing: 0; line-height: 1.6;
  font-family: var(--su-pismo); }

/* ------------------------------------------------------------- ::: klid --- */
/* Samostatná myšlenka s prostorem kolem. */
.blok--klid { margin: 3rem 0; text-align: center; }
.md-typeset .md-table-align--center { text-align: center; }
.md-typeset .md-table-align--right { text-align: right; }
.blok--klid p { font-size: 1.05rem; line-height: 1.55; max-width: 30rem;
  margin: 0 auto; }

/* -------------------------------------------- ::: obraz-vlevo / -vpravo --- */
.blok--obraz-vpravo, .blok--obraz-vlevo {
  display: grid; gap: 1.6rem; align-items: center; margin: 2.8rem 0;
  grid-template-columns: 1fr 1fr; }
.blok--obraz-vpravo img, .blok--obraz-vlevo img {
  width: 100%; height: auto; border-radius: 8px; display: block; }
.blok--obraz-vpravo > p, .blok--obraz-vlevo > p { margin: 0 0 .8em; }
.blok--obraz-vpravo > p:last-child, .blok--obraz-vlevo > p:last-child { margin-bottom: 0; }
/* Obrázek zůstává ve svém sloupci přes všechny řádky textu. Samotné pořadí
   prvků v Markdownu tak nerozbije blok s více odstavci. */
.blok--obraz-vpravo > :not(p:has(img)) { grid-column: 1; }
.blok--obraz-vpravo > p:has(img) {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}
.blok--obraz-vlevo > p:has(img) {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
}
.blok--obraz-vlevo > :not(p:has(img)) { grid-column: 2; }

/* Obrazová varianta příkladu drží výklad vlevo a úzký obraz přes jeho výšku
   vpravo. Vzhled panelu je v redakční vrstvě vzhled.css. */
.blok--priklad-vpravo {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(9rem, .55fr);
  gap: 0 1.25rem;
  align-items: start;
}
.blok--priklad-vpravo > :not(p:has(img)) { grid-column: 1; }
.blok--priklad-vpravo > p:has(img) {
  grid-column: 2;
  grid-row: 1 / span 20;
  align-self: stretch;
  margin: 0;
}
.blok--priklad-vpravo > p:has(img) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 700px) {
  .blok--obraz-vpravo, .blok--obraz-vlevo { grid-template-columns: 1fr; }
  .blok--obraz-vpravo > *, .blok--obraz-vlevo > * { grid-column: 1; }
  .blok--obraz-vpravo > p:has(img), .blok--obraz-vlevo > p:has(img) {
    grid-row: auto;
    order: -1;
  }
  .blok--priklad-vpravo { grid-template-columns: minmax(0, 1fr); }
  .blok--priklad-vpravo > *,
  .blok--priklad-vpravo > p:has(img) { grid-column: 1; }
  .blok--priklad-vpravo > p:has(img) {
    grid-row: auto;
    height: 15rem;
    margin: .25rem 0 1rem;
  }
}

/* -------------------------------------------------------- ::: pres-sirku --- */
/* Obsah přeteče přes čtecí sloupec do stran. */
.blok--pres-sirku { margin: 3.2rem calc(-1 * clamp(0px, 5vw, 4.5rem)); }
.blok--pres-sirku img { width: 100%; height: auto; border-radius: 10px; display: block; }
.blok--pres-sirku > p { margin: 0; }
.blok--pres-sirku em, .md-typeset .popisek { display: block; text-align: center;
  font-size: .76rem; color: var(--su-seda); margin-top: .6rem; font-style: normal; }

/* =========================================================================
   DLAŽDICE MODULŮ na úvodní stránce
   ========================================================================= */
.k-dlazdice__mriz { display: grid; gap: .9rem; margin: 1.8rem 0;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.k-dlazdice__karta { display: flex; flex-direction: column;
  border: 1px solid var(--su-linka); border-radius: 10px; padding: 1.1rem 1.2rem 1rem;
  background: var(--su-pozadi); text-decoration: none !important; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.k-dlazdice__karta:hover { border-color: var(--su-cervena);
  box-shadow: 0 4px 18px rgba(151,30,57,.13); transform: translateY(-2px); }
.k-dlazdice__hlava { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.k-dlazdice__cislo { display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: none;
  background: var(--su-cervena); color: #fff; font-weight: 700; font-size: .82rem; }
.k-dlazdice__stav { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--su-seda); background: var(--su-pozadi-2);
  border: 1px solid var(--su-linka); border-radius: 99px; padding: 1px 8px; }
.k-dlazdice__nazev { font-size: 1rem !important; font-weight: 700;
  margin: 0 0 .35rem !important; color: var(--su-cerna); line-height: 1.3; }
.k-dlazdice__popis { font-size: .82rem; line-height: 1.55; color: var(--su-seda);
  margin: 0 0 .9rem; flex: 1; }
.k-dlazdice__pata { display: flex; justify-content: space-between; align-items: center;
  font-size: .74rem; color: var(--su-seda); border-top: 1px solid var(--su-linka);
  padding-top: .6rem; }
.k-dlazdice__sipka { color: var(--su-cervena); font-weight: 700; font-size: .95rem; }

/* --------------------------------------------------------------- karty --- */
.k-mrizka { display: grid; gap: .8rem; margin: 1.2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.k-karta { border: 1px solid var(--su-linka); border-radius: 8px; padding: .9rem 1.1rem;
  background: var(--su-pozadi); }
.k-karta > strong { display: block; margin-bottom: .25rem; color: var(--su-cervena); }
.k-karta > p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------- ::: proces --- */
/* Kompaktní mapa pěti navazujících kroků. Na široké obrazovce využívá
   prostor vedle čtecího sloupce; podrobné vysvětlení zůstává až pod ní. */
.md-typeset .blok--proces > ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .45rem;
  margin: 1.2rem 0 1.8rem;
  padding: 0;
  list-style: none;
}
.md-typeset .blok--proces > ol > li { min-width: 0; margin: 0; }

/* Tři úrovně dopadu zůstávají na široké obrazovce v jedné řadě. */
.md-typeset .blok--panely.blok--panely-semafor > ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Přesně tři krátké standardní panely tvoří na široké stránce jednu řadu.
   Minmax drží všechny karty uvnitř čtecího sloupce i vedle postranní navigace. */
.md-typeset .blok--panely > ul:has(> li:nth-child(3):last-child),
.md-typeset .blok--panely > ol:has(> li:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md-typeset .blok--panely > ul:has(> li:nth-child(3):last-child) > li:last-child,
.md-typeset .blok--panely > ol:has(> li:nth-child(3):last-child) > li:last-child {
  grid-column: auto;
}
@media (max-width: 900px) {
  .md-typeset .blok--proces > ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .md-typeset .blok--proces > ol { grid-template-columns: minmax(0, 1fr); }
  .md-typeset .blok--panely.blok--panely-semafor > ul {
    grid-template-columns: minmax(0, 1fr);
  }
  .md-typeset .blok--panely > ul:has(> li:nth-child(3):last-child),
  .md-typeset .blok--panely > ol:has(> li:nth-child(3):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------- hlavička modulu --- */
.k-hlavicka { border-left: 4px solid var(--su-cervena); background: var(--su-pozadi-2);
  padding: .9rem 1.2rem; border-radius: 0 8px 8px 0; margin: 0 0 1.6rem; font-size: .92em; }
.k-hlavicka p { margin: .2rem 0; }
.k-hlavicka strong { color: var(--su-cervena); }

/* -------------------------------------------------------- chybová hláška --- */
.k-chyba { background: #FCECEC; border: 2px solid #B3202E; color: #7E1222;
  padding: .8rem 1.1rem; border-radius: 8px; margin: 1rem 0; font-size: .9em; }

/* ------------------------------------------------ společné pro komponenty --- */
.k { border: 1px solid var(--su-linka); border-radius: 10px; padding: 1.3rem 1.5rem;
  margin: 1.6rem 0; background: var(--su-pozadi); }
.k .k-nadpis { margin: 0 0 .2rem; font-size: .95rem; color: var(--su-cervena);
  text-transform: uppercase; letter-spacing: .08em; }
.k .k-uvod { color: var(--su-seda); margin: 0 0 1rem; font-size: .95em; }
.k-tl { background: var(--su-cervena); color: #fff; border: 0; border-radius: 6px;
  padding: .5rem 1.1rem; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.k-tl:hover { background: var(--su-cervena-tmava); }
.k-tl[disabled] { opacity: .45; cursor: default; }
.k-tl.k-tl-2 { background: transparent; color: var(--su-cervena);
  border: 1px solid var(--su-cervena); }
.k-tl.k-tl-2:hover { background: var(--su-cervena-svetla); }
.k-ovladani { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* ------------------------------------------------------------- predikce --- */
.k-predikce .k-veta { font-size: 1.05rem; margin-bottom: 1rem; }
.k-predikce .k-mezera { display: inline-block; min-width: 105px; text-align: center;
  border-bottom: 2px dashed var(--su-cervena); color: var(--su-cervena); font-weight: 700; }
.k-radek { display: grid; grid-template-columns: 120px 1fr 46px; align-items: center;
  gap: .7rem; margin: .35rem 0; opacity: 0; transform: translateY(4px); transition: .3s; }
.k-radek.k-vidno { opacity: 1; transform: none; }
.k-radek b { font-weight: 700; font-size: .9rem; }
.k-radek span { font-size: .82rem; color: var(--su-seda); text-align: right; }
.k-pruh { height: 14px; background: var(--su-linka); border-radius: 4px; overflow: hidden; }
.k-pruh i { display: block; height: 100%; width: 0; background: var(--su-cervena);
  transition: width .6s ease; }

/* ---------------------------------------------------------- najdi-chybu --- */
.k-najdi-chybu .k-text { line-height: 2; border: 1px solid var(--su-linka);
  border-radius: 8px; padding: 1.1rem 1.3rem; background: var(--su-pozadi-2); }
.k-najdi-chybu .k-text p { margin: .4rem 0; }
.k-oznac { cursor: pointer; padding: 1px 3px; border-radius: 3px;
  border-bottom: 1px dotted var(--su-seda); }
.k-oznac:hover { background: var(--su-cervena-svetla); }
.k-oznac.k-vybrano { background: #FFF3C4; border-bottom-color: var(--sem-zluta); }
.k-oznac.k-spravne { background: var(--sem-zelena-bg); border-bottom: 2px solid var(--sem-zelena); }
.k-oznac.k-chybi   { background: var(--sem-cervena-bg); border-bottom: 2px solid var(--sem-cervena); }
.k-oznac.k-planych { background: var(--sem-zluta-bg); border-bottom: 2px solid var(--sem-zluta); }

/* -------------------------------------------------------------- semafor --- */
.k-scenar { border: 1px solid var(--su-linka); border-radius: 8px; padding: .9rem 1.1rem;
  margin: .7rem 0; }
.k-scenar .k-zadani { margin: 0 0 .7rem; }
.k-volby { display: flex; gap: .5rem; flex-wrap: wrap; }
.k-volba { border: 1px solid var(--su-linka); background: var(--su-pozadi); border-radius: 99px;
  padding: .35rem 1rem; font: inherit; font-size: .82rem; cursor: pointer; }
.k-volba:hover { border-color: var(--su-seda); }
.k-volba[data-b="zelena"].k-akt  { background: var(--sem-zelena-bg);  border-color: var(--sem-zelena);  color: var(--sem-zelena); font-weight: 700; }
.k-volba[data-b="zluta"].k-akt   { background: var(--sem-zluta-bg);   border-color: var(--sem-zluta);   color: var(--sem-zluta); font-weight: 700; }
.k-volba[data-b="cervena"].k-akt { background: var(--sem-cervena-bg); border-color: var(--sem-cervena); color: var(--sem-cervena); font-weight: 700; }
.k-odpoved { display: none; margin-top: .7rem; padding-left: .8rem; font-size: .9em;
  border-left: 3px solid var(--su-linka); color: var(--su-seda); }
.k-odpoved.k-vidno { display: block; }
.k-scenar.k-ok  { border-color: var(--sem-zelena); }
.k-scenar.k-spatne { border-color: var(--sem-cervena); }

/* ----------------------------------------------------------------- kvíz --- */
.k-otazka { border: 1px solid var(--su-linka); border-radius: 8px; padding: 1rem 1.2rem; margin: .8rem 0; }
.k-otazka .k-zneni { font-weight: 700; margin-bottom: .7rem; }
.k-otazka label { display: block; border: 1px solid var(--su-linka); border-radius: 6px;
  padding: .5rem .8rem; margin-bottom: .4rem; cursor: pointer; font-size: .93em; }
.k-otazka label:hover { background: var(--su-pozadi-2); }
.k-otazka label.k-ok    { background: var(--sem-zelena-bg);  border-color: var(--sem-zelena); }
.k-otazka label.k-spatne{ background: var(--sem-cervena-bg); border-color: var(--sem-cervena); }
.k-otazka input { margin-right: .55rem; }
.k-vysvetleni { display: none; margin-top: .7rem; padding-left: .8rem;
  border-left: 3px solid var(--su-linka); font-size: .9em; color: var(--su-seda); }
.k-vysvetleni.k-vidno { display: block; }
.k-vysledek { display: none; margin-top: 1.1rem; padding: 1rem 1.3rem; border-radius: 8px; }
.k-vysledek.k-vidno { display: block; }
.k-vysledek.k-proslo  { background: var(--sem-zelena-bg);  border: 1px solid var(--sem-zelena); }
.k-vysledek.k-neproslo{ background: var(--sem-zluta-bg);   border: 1px solid var(--sem-zluta); }

/* -------------------------------------------------------------- nástroje --- */
.k-nastroje .k-kat { margin-top: 2.4rem; }
.k-nastroje__mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; gap: .85rem; margin-top: 1rem; }
.k-nastroj { min-width: 0; }
.k-nastroj__souhrn { min-height: 10rem; padding: 1rem 1.1rem; }
.k-nastroj__nazev, .k-nastroj__popis, .k-nastroj__ovladani { display: block; }
.k-nastroj__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.k-nastroj__ovladani { margin-top: .85rem; }
.k-nastroj__detail { padding: .9rem 1.1rem 1.1rem; }
.k-nastroj__seznam { display: grid; grid-template-columns: minmax(7rem, auto) 1fr;
  gap: .45rem .8rem; margin: 0 0 .9rem; }
.k-nastroj__seznam dt, .k-nastroj__seznam dd { margin: 0; min-width: 0; }
.k-nastroj__odkaz { display: inline-block; }
.k-stitek { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .74rem;
  font-weight: 700; white-space: nowrap; }
.k-stitek.zelena  { background: var(--sem-zelena-bg);  color: var(--sem-zelena); }
.k-stitek.zluta   { background: var(--sem-zluta-bg);   color: var(--sem-zluta); }
.k-stitek.cervena { background: var(--sem-cervena-bg); color: var(--sem-cervena); }
@media (max-width: 700px) {
  .k-nastroje__mrizka { grid-template-columns: minmax(0, 1fr); }
  .k-nastroj__souhrn { min-height: 0; }
  .k-nastroj__seznam { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .k-nastroj__seznam dd { margin-bottom: .55rem; }
}

/* ------------------------------------------------- fakultní akcenty (M5) --- */
.fak { border-left: 4px solid var(--su-seda); padding-left: 1rem; margin: 1.2rem 0; }
.fak-opf { border-left-color: var(--fak-opf); }
.fak-fpf { border-left-color: var(--fak-fpf); }
.fak-fvp { border-left-color: var(--fak-fvp); }
.fak-mu  { border-left-color: var(--fak-mu); }
.fak-rek { border-left-color: var(--fak-rek); }

@media print { .k-ovladani, .md-header, .md-sidebar { display: none !important; } }
@media (max-width: 600px) { .k-radek { grid-template-columns: 92px 1fr 42px; } }

/* =========================================================================
   ODHAL — karta s otázkou, odpověď se odkryje po kliknutí
   ========================================================================= */
.k-odhal__mriz { display: grid; gap: .8rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.k-odhal__karta { text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--su-linka); border-radius: 10px; padding: 1.1rem 1.2rem;
  background: var(--su-pozadi-2); transition: border-color .15s, background .15s; }
.k-odhal__karta:hover { border-color: var(--su-cervena); }
.k-odhal__karta.k-odkryto { background: var(--su-pozadi); border-color: var(--su-cervena); }
.k-odhal__otazka { font-weight: 700; color: var(--su-cerna); line-height: 1.4;
  font-size: .92rem; }
.k-odhal__vyzva { margin-top: .7rem; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; color: var(--su-cervena); }
.k-odhal__odpoved { display: none; margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--su-linka); font-size: .88rem; line-height: 1.6;
  color: var(--su-seda); }
.k-odhal__karta.k-odkryto .k-odhal__odpoved { display: block; }

/* =========================================================================
   POROVNÁNÍ — dvě verze vedle sebe, rozdíl se vysvětlí až po kliknutí
   ========================================================================= */
.k-porovnani__dvojice + .k-porovnani__dvojice { margin-top: 2rem;
  padding-top: 1.6rem; border-top: 1px solid var(--su-linka); }
.k-porovnani__popis { font-weight: 700; margin: .8rem 0 .7rem; color: var(--su-cerna); }
.k-porovnani__radek { display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.k-porovnani__sloupec { border: 1px solid var(--su-linka); border-radius: 9px;
  padding: .9rem 1rem; }
.k-porovnani__sloupec.k-spatne { background: var(--sem-cervena-bg); border-color: #EBC9CB; }
.k-porovnani__sloupec.k-dobre  { background: var(--sem-zelena-bg);  border-color: #C3E0CF; }
.k-porovnani__stitek { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; margin-bottom: .45rem; }
.k-spatne .k-porovnani__stitek { color: var(--sem-cervena); }
.k-dobre  .k-porovnani__stitek { color: var(--sem-zelena); }
.k-porovnani__text { font-family: var(--su-pismo-kod); font-size: .8rem; line-height: 1.6;
  white-space: pre-wrap; color: var(--su-cerna); }
.k-porovnani__proc { display: none; margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid rgba(0,0,0,.09); font-size: .85rem; line-height: 1.6; }
.k-porovnani__dvojice.k-odkryto .k-porovnani__proc { display: block; }

/* =========================================================================
   CHECKLIST — odškrtávací seznam
   ========================================================================= */
.k-checklist__seznam { margin-top: 1rem; }
.k-checklist__polozka { display: flex; gap: .7rem; align-items: flex-start;
  border: 1px solid var(--su-linka); border-radius: 8px; padding: .7rem .9rem;
  margin-bottom: .45rem; cursor: pointer; transition: background .12s, border-color .12s; }
.k-checklist__polozka:hover { background: var(--su-pozadi-2); }
.k-checklist__polozka.k-hotovo { background: var(--sem-zelena-bg);
  border-color: #C3E0CF; }
.k-checklist__polozka.k-hotovo .k-checklist__text { text-decoration: line-through;
  color: var(--su-seda); }
.k-checklist__polozka input { margin-top: .25rem; flex: none; width: 1rem; height: 1rem;
  accent-color: var(--sem-zelena); }
.k-checklist__telo { display: block; }
.k-checklist__text { display: block; font-weight: 700; font-size: .9rem;
  color: var(--su-cerna); }
.k-checklist__detail { display: block; font-size: .82rem; line-height: 1.55;
  color: var(--su-seda); margin-top: .15rem; }
.k-checklist__hotovo { display: none; margin-top: 1rem; padding: .9rem 1.2rem;
  border-radius: 8px; background: var(--sem-zelena-bg); border: 1px solid var(--sem-zelena);
  font-size: .9rem; }
.k-checklist__hotovo.k-vidno { display: block; }

/* =========================================================================
   PAMĚŤ POSTUPU – pruh „Pokračovat", značka hotovo, ovládání
   ========================================================================= */
.k-pokracovat { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .6rem 1rem;
  border: 1px solid var(--su-cervena); border-radius: 8px;
  padding: .8rem 1.1rem; margin: 0 0 1.2rem; background: var(--su-cervena-svetla); }
.k-pokracovat__stav { font-size: .78rem; color: var(--su-cerna); }
.k-pokracovat__odkaz { font-weight: 700; font-size: .85rem;
  color: var(--su-cervena) !important; text-decoration: none !important; }
.k-pokracovat__odkaz:hover { text-decoration: underline !important; }
.k-pokracovat.k-hotovo-vse { border-color: var(--sem-zelena); background: var(--sem-zelena-bg); }
.k-pokracovat.k-hotovo-vse .k-pokracovat__odkaz { color: var(--sem-zelena) !important; }

.k-dlazdice__znacka { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--sem-zelena); background: var(--sem-zelena-bg);
  border-radius: 99px; padding: 1px 8px; }
.k-dlazdice__karta.k-hotovo .k-dlazdice__cislo { color: var(--sem-zelena); }

.k-postup__hotovo { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--sem-zelena); margin-left: .6rem; }

.k-pamet { font-size: .72rem; line-height: 1.6; color: var(--su-seda);
  border-top: 1px solid var(--su-linka); padding-top: .8rem; margin: 1.4rem 0 0; }
.k-pamet__tl { background: none; border: 0; padding: 0; font: inherit;
  color: var(--su-cervena); text-decoration: underline; cursor: pointer; }
.k-pamet__tl:hover { color: var(--su-cervena-tmava); }