/* ===========================================================================
   VZHLED — redakční směr

   Tenhle soubor mění jen to, jak web vypadá. Nemění obsah ani chování.
   Když se vám nebude zdát, smažte v mkdocs.yml řádek s "assets/vzhled.css"
   a jste zpátky u předchozí podoby. Nic jiného není potřeba.

   Načítá se jako poslední, takže přebíjí kurz.css.
   =========================================================================== */

:root {

  /* -------------------------------------------------------------------
     PÍSMO

     Nic se nestahuje zvenčí — obojí je na každém počítači. Web tak dál
     funguje bez internetu a bez řešení GDPR (rozhodnutí R2).

     NADPISY — Georgia. Serif navržený přímo pro obrazovku, na rozdíl
     od Times. Volba není náhodná: písmo ve značce SU (Enriqueta) je
     egyptienka, tedy serif se silnými patkami. Georgia má podobný
     charakter, takže nadpisy ladí se značkou, aniž bychom použili
     Enriquetu — tu manuál v kap. 5.1 vyhrazuje jen pro text ve značce.

     TEXT — systémový bezserifový stack. Na Windows 11 se vykreslí
     Segoe UI Variable, na Windows 10 Segoe UI, na Macu San Francisco.
     Arial zůstal na konci jen jako záloha.

     Kdybyste chtěli nasadit Ladislav nebo Usual z manuálu, je k tomu
     potřeba webfont licence — viz otevřená otázka O2.
     ------------------------------------------------------------------- */

  --su-pismo: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
              "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --su-pismo-nadpis: Georgia, "Iowan Old Style", "Palatino Linotype",
              Palatino, Constantia, serif;

  /* Redakční sazba potřebuje víc vzduchu než dokumentace. */
  --kurz-text: 40rem;
  --kurz-radius-boxu: 8px;
}


/* ========================================================== SAZBA TEXTU === */

.md-typeset { font-size: .84rem; line-height: 1.75; }
.md-typeset p { margin: 0 0 1.15em; hyphens: auto; }

/* Nadpis části: velký, těsně vedený, bez ozdob. */
.md-typeset h1 {
  font-family: var(--su-pismo-nadpis);
  font-size: 2.15rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 1.1rem;
}

/* Nadpis sekce: bez linky pod ním. Odděluje ho prostor a krátký červený
   vlásek nad ním — čára přes celou šířku dělá z textu dokumentaci. */
.md-typeset h2 {
  font-family: var(--su-pismo-nadpis);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 2.4em 0 .8em;
}
.md-typeset h2::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  background: var(--su-cervena);
  margin-bottom: .7rem;
}

.md-typeset h3 {
  font-family: var(--su-pismo-nadpis);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: -.005em;
  margin: 1.9em 0 .55em;
}

.md-typeset h4 {
  font-family: var(--su-pismo);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Úvodní odstavec části je o stupeň větší — vtáhne do textu. */
.k-hlavicka + p,
.md-typeset h1 + p {
  font-size: .98rem;
  line-height: 1.62;
  color: var(--su-cerna);
}

.md-typeset hr { margin: 2.7em 0; border-top: 1px solid var(--su-linka); }
.md-typeset a { text-underline-offset: 3px; }


/* ================================================ ZÁHLAVÍ A UKAZATEL === */

/* Z ukazatele postupu se stává redakční nadřádek nad titulkem. */
.k-postup {
  border-bottom: 1px solid var(--su-linka);
  padding: .3rem 0 .55rem;
  margin-bottom: 1.2rem;
}
.k-postup__hlava {
  font-family: var(--su-pismo);
  font-size: .62rem;
  letter-spacing: .16em;
  font-weight: 700;
}
.k-postup__drah { height: 2px; border-radius: 0; background: transparent; }
.k-postup__drah i { border-radius: 0; }

/* Údaje o délce a povinnosti: drobný řádek, ne barevný panel. */
.k-hlavicka {
  border-left: 0;
  background: transparent;
  padding: 0 0 .85rem;
  margin: 0 0 1.3rem;
  border-bottom: 1px solid var(--su-linka);
  font-size: .76rem;
  color: var(--su-seda);
}
.k-hlavicka strong { color: var(--su-cerna); font-weight: 700; }


/* ============================================== VÝRAZNÁ MÍSTA V TEXTU === */

/* Titulní pás otevírá stránku jako samostatnou část kurzu. Obsahuje jen
   nadřádek, jediný H1 a stručný podtitul; další text už patří pod něj. */
.blok--titul {
  margin: 0 calc(-1 * clamp(1rem, 4vw, 3rem)) 2.5rem;
  padding: clamp(1.8rem, 5vw, 3.8rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--su-cervena);
  color: var(--su-na-cervene);
  border-radius: var(--kurz-radius-boxu);
}
.blok--titul > p:first-child {
  margin: 0 0 .75rem;
  color: var(--su-na-cervene-2);
  font-family: var(--su-pismo);
  font-size: .66rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.md-typeset .blok--titul h1 {
  max-width: 12em;
  margin: 0 0 1rem;
  color: var(--su-na-cervene);
  font-size: clamp(2.25rem, 6vw, 3.35rem);
  line-height: 1.02;
}
.blok--titul h1::after {
  content: "";
  display: block;
  width: 3.4rem;
  height: 2px;
  margin-top: 1rem;
  background: var(--su-na-cervene-2);
}
.md-typeset .blok--titul h1 + p {
  max-width: 38rem;
  margin: 0;
  color: var(--su-na-cervene);
  font-size: 1.05rem;
  line-height: 1.55;
}
.blok--titul .k-hlavicka {
  max-width: 38rem;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--su-na-cervene-2);
}
.blok--titul .k-hlavicka > p:first-child {
  margin: 0 0 .8rem;
  color: var(--su-na-cervene-2);
  font-size: .68rem;
  letter-spacing: .04em;
}
.blok--titul .k-hlavicka > p:last-child {
  margin: 0;
  color: var(--su-na-cervene);
  font-size: 1.05rem;
  line-height: 1.55;
}
.blok--titul .k-hlavicka strong,
.blok--titul .k-hlavicka a { color: inherit; }
.blok--titul .k-hlavicka a { text-decoration-color: var(--su-na-cervene-2); }

/* Velká myšlenka jako klidný redakční předěl: bez rámu a oddělovacích čar. */
.blok--statement {
  border: 0;
  padding: 0;
  margin: 1.9rem 0;
  text-align: center;
}
.blok--statement p {
  max-width: 38rem;
  margin-right: auto;
  margin-left: auto;
  font-size: 1.45rem;
  line-height: 1.22;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.blok--statement p + p {
  font-size: .82rem;
  line-height: 1.65;
  margin-top: .8rem;
}

.blok--klid {
  display: grid;
  place-items: center;
}
.blok--klid p {
  width: 100%;
  max-width: 32rem;
  margin-right: auto;
  margin-left: auto;
  font-family: var(--su-pismo-nadpis);
  font-size: 1.15rem;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  hyphens: none;
}

/* Delší ucelená část na jemném pozadí. Plocha vytváří rytmus stránky,
   nemá se proto opakovat u několika sousedních sekcí. */
.blok--plocha {
  margin: 2.8rem calc(-1 * clamp(1rem, 4vw, 3rem));
  padding: 1.8rem clamp(1.25rem, 4vw, 3rem) 2rem;
  background: var(--su-pozadi-2);
  border-radius: var(--kurz-radius-boxu);
}
.blok--plocha > :first-child { margin-top: 0; }
.blok--plocha > :last-child { margin-bottom: 0; }
.blok--plocha h2::before { margin-top: 0; }

/* Druhá plocha pro důležité orientační body. Teplý antracit je měkčí než
   čistá černá; univerzitní červená zůstává jen v akcentu, aby delší čtení
   nebylo únavné. */
.blok--plocha-tmava {
  margin: 2.8rem calc(-1 * clamp(1rem, 4vw, 3rem));
  padding: 1.8rem clamp(1.25rem, 4vw, 3rem) 2rem;
  border-top: 4px solid var(--su-cervena);
  border-radius: var(--kurz-radius-boxu);
  background: var(--su-plocha-tmava);
  color: var(--su-plocha-tmava-text-2);
}
.blok--plocha-tmava > :first-child { margin-top: 0; }
.blok--plocha-tmava > :last-child { margin-bottom: 0; }
.md-typeset .blok--plocha-tmava h2,
.md-typeset .blok--plocha-tmava h3,
.md-typeset .blok--plocha-tmava strong { color: var(--su-plocha-tmava-text); }
.blok--plocha-tmava h2::before {
  margin-top: 0;
  background: var(--su-cervena);
}
.md-typeset .blok--plocha-tmava a { color: var(--su-na-cervene-2); }
.md-typeset .blok--plocha-tmava > ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.35rem 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: tmavy-krok;
}
.md-typeset .blok--plocha-tmava > ol > li {
  margin: 0;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--su-plocha-tmava-linka);
  border-radius: var(--kurz-radius-boxu);
  background: var(--su-plocha-tmava-2);
  counter-increment: tmavy-krok;
}
.md-typeset .blok--plocha-tmava > ol > li::before {
  content: "KROK " counter(tmavy-krok);
  display: block;
  margin-bottom: .45rem;
  color: var(--su-na-cervene-2);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .12em;
}

/* Výklad zelené, žluté a červené: barva není jen v nadpisu, ale v celé
   klidné kartě. Text zůstává hlavním nositelem významu kvůli přístupnosti. */
.semafor-legenda {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin: 1.6rem calc(-1 * clamp(0rem, 2vw, 1.5rem)) 2.4rem;
}
.semafor-legenda__polozka {
  padding: 1.05rem 1.1rem 1.15rem;
  border: 1px solid var(--su-linka);
  border-top-width: 4px;
  border-radius: var(--kurz-radius-boxu);
}
.md-typeset .semafor-legenda__polozka h3 {
  margin-top: 0;
  font-size: 1rem;
}
.md-typeset .semafor-legenda__polozka p,
.md-typeset .semafor-legenda__polozka li { font-size: .82rem; }
.md-typeset .semafor-legenda__polozka ul { padding-left: 1rem; }
.semafor-legenda__polozka--zelena {
  border-top-color: var(--sem-zelena);
  background: var(--sem-zelena-bg);
}
.md-typeset .semafor-legenda__polozka--zelena h3 { color: var(--sem-zelena-text); }
.semafor-legenda__polozka--zluta {
  border-top-color: var(--sem-zluta);
  background: var(--sem-zluta-bg);
}
.md-typeset .semafor-legenda__polozka--zluta h3 { color: var(--sem-zluta-text); }
.semafor-legenda__polozka--cervena {
  border-top-color: var(--sem-cervena);
  background: var(--sem-cervena-bg);
}
.md-typeset .semafor-legenda__polozka--cervena h3 { color: var(--sem-cervena-text); }

@media (max-width: 800px) {
  .semafor-legenda {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Výuková mozaika: asymetrický obrazový úvod a pod ním řada krátkých
   orientačních bodů. Převádí výrazný magazínový rytmus do střídmého
   univerzitního provedení. */
.blok--mozaika {
  display: grid;
  grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.28fr);
  gap: 1.2rem clamp(1.35rem, 3vw, 2.4rem);
  align-items: center;
  margin: 2.8rem calc(-1 * clamp(0rem, 2vw, 1.5rem));
  padding: 1.15rem;
  border-top: 3px solid var(--su-cervena);
  border-radius: var(--kurz-radius-boxu);
  background: var(--su-pozadi-2);
}
.blok--mozaika > p:first-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  margin: 0;
}
.blok--mozaika > p:first-child img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  margin: 0;
  border-radius: var(--kurz-radius-boxu);
  object-fit: cover;
}
.md-typeset .blok--mozaika h3 {
  align-self: end;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}
.blok--mozaika h3 + p {
  align-self: start;
  margin: 0;
}
.md-typeset .blok--mozaika > ul {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .85rem;
  margin: .35rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: mozaika;
}
.md-typeset .blok--mozaika > ul > li {
  position: relative;
  margin: 0;
  padding: 2.75rem .25rem .2rem;
  border-top: 1px solid var(--su-linka);
  counter-increment: mozaika;
}
.md-typeset .blok--mozaika > ul > li::before {
  content: counter(mozaika, decimal-leading-zero);
  position: absolute;
  top: .65rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid var(--su-cervena);
  border-radius: 50%;
  color: var(--su-cervena);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.md-typeset .blok--mozaika > ul > li strong {
  display: block;
  margin-bottom: .25rem;
  color: var(--su-cerna);
  font-size: .76rem;
  line-height: 1.35;
}

/* Popisky pod obrázky */
.blok--pres-sirku em, .md-typeset .popisek {
  font-family: var(--su-pismo);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--su-seda);
  margin-top: .9rem;
}
.blok--pres-sirku img, .blok--obraz-vlevo img, .blok--obraz-vpravo img {
  border-radius: var(--kurz-radius-boxu);
}
.blok--obraz-vlevo, .blok--obraz-vpravo {
  gap: clamp(1.5rem, 4vw, 3.2rem);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  margin: 2.8rem calc(-1 * clamp(0rem, 2vw, 1.5rem));
  padding: 1.25rem;
  background: var(--su-pozadi-2);
  border-radius: var(--kurz-radius-boxu);
}
.blok--obraz-vpravo img, .blok--obraz-vlevo img {
  height: auto;
  object-fit: contain;
}

/* Plně ohraničený příklad s obrazem používá stejný významový jazyk jako
   běžný panel example: neutrální plocha a červený horní akcent. */
.blok--priklad-vpravo {
  margin: 1.6rem 0 1.8rem;
  padding: 1.1rem;
  border: 1px solid var(--su-linka);
  border-top: 4px solid var(--su-cervena);
  border-radius: var(--kurz-radius-boxu);
  background: var(--su-pozadi-2);
  overflow: hidden;
}
.md-typeset .blok--priklad-vpravo > h3 {
  margin: 0 0 .85rem;
  color: var(--su-cervena);
  font-family: var(--su-pismo);
  font-size: .88rem;
  line-height: 1.4;
}
.blok--priklad-vpravo > p:has(img) img {
  border-radius: calc(var(--kurz-radius-boxu) - 3px);
}
.blok--priklad-vpravo > :last-child { margin-bottom: 0; }

/* Úvod semaforu: jeden celek rozdělený na čtyři stejně čitelné části. */
.blok--semafor-uvod {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  margin: 2.8rem calc(-1 * clamp(0rem, 2vw, 1.5rem));
  border-radius: var(--kurz-radius-boxu);
  background: var(--su-pozadi-2);
  overflow: hidden;
}
.md-typeset .blok--semafor-uvod > h3 {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 1.25rem;
}
.blok--semafor-uvod > p {
  margin: 0;
  padding: 1.25rem;
}
.blok--semafor-uvod > h3 + p {
  padding: 0;
}
.blok--semafor-uvod > h3 + p img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.semafor-vysledek--zelena { color: var(--sem-zelena-text); }
.semafor-vysledek--zluta { color: var(--sem-zluta-text); }
.semafor-vysledek--cervena { color: var(--sem-cervena-text); }
@media (max-width: 700px) {
  .blok--semafor-uvod {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Obrazový rozcestník do Praktické příručky. Stejná karta může vést na
   přehled nástrojů, konkrétní postup nebo knihovnu promptů; cíl určují
   odkazy v Markdownu, takže vzhled zůstává jednotný napříč kurzem. */
.blok--prirucka {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(15rem, .85fr);
  gap: clamp(1.35rem, 3vw, 2.4rem);
  align-items: center;
  margin: 2.8rem calc(-1 * clamp(0rem, 2vw, 1.5rem));
  padding: 1rem;
  border: 1px solid var(--su-linka);
  border-radius: var(--kurz-radius-boxu);
  background: var(--su-pozadi-2);
}
.blok--prirucka > p:first-child {
  grid-row: 1 / span 4;
  margin: 0;
}
.blok--prirucka > p:first-child a {
  display: block;
  overflow: hidden;
  border-radius: var(--kurz-radius-boxu);
}
.blok--prirucka > p:first-child img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--kurz-radius-boxu);
  transition: transform .18s ease, filter .18s ease;
}
.blok--prirucka > p:first-child a:hover img {
  transform: scale(1.015);
  filter: saturate(1.04);
}
.blok--prirucka > p:first-child a:focus-visible {
  outline: 3px solid var(--su-cervena);
  outline-offset: 3px;
}
.md-typeset .blok--prirucka h4 {
  margin: 0;
  font-family: var(--su-pismo-nadpis);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
}
.blok--prirucka h4 a {
  color: var(--su-cerna);
  text-decoration: none;
}
.blok--prirucka h4 a:hover { color: var(--su-cervena); }
.blok--prirucka > p:not(:first-child) { margin: 0; }
.blok--prirucka > p:last-child a {
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .blok--prirucka > p:first-child img { transition: none; }
  .blok--prirucka > p:first-child a:hover img { transform: none; }
}


/* =========================================================== BOXY ======= */

/* Všechny boxy používají stejnou základní geometrii: plný rámeček,
   jemný podklad a zaoblené rohy. Starý formát s jedinou svislou čárou
   je záměrně odstraněný; na dlouhé stránce působil jako cizí prvek. */
.md-typeset .admonition, .md-typeset details {
  border: 1px solid var(--su-linka);
  border-radius: var(--kurz-radius-boxu);
  box-shadow: none;
  background: var(--su-pozadi-2);
  font-size: .82rem;
  padding: .2rem 1rem;
  margin: 1.6rem 0;
  overflow: hidden;
}
.md-typeset details { padding: 0; }
.md-typeset .admonition-title, .md-typeset summary {
  background: transparent !important;
  font-family: var(--su-pismo);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .01em;
  padding-left: 1rem;
}
.md-typeset .admonition-title::before, .md-typeset summary::before { display: none; }
.md-typeset .admonition > :not(.admonition-title),
.md-typeset details > :not(summary) { padding-left: 1rem; padding-right: .4rem; }

/* Informační vsuvky a příklady jsou samostatné panely, aby se daly při
   čtení snadno odlišit od běžného textu. Vzhledem navazují na schválené
   panely z úvodní stránky. */
.md-typeset .admonition.info,
.md-typeset .admonition.example,
.md-typeset details.info {
  border: 1px solid var(--su-linka);
  border-radius: var(--kurz-radius-boxu);
  background: var(--su-pozadi-2);
  overflow: hidden;
}
.md-typeset .admonition.info,
.md-typeset .admonition.example {
  padding: .2rem 1rem;
}
.md-typeset .admonition.example {
  border-top: 3px solid var(--su-cervena);
}
.md-typeset details.info {
  border-left: 4px solid var(--su-cervena);
  padding: 0;
}
.md-typeset .admonition.info > .admonition-title,
.md-typeset .admonition.example > .admonition-title,
.md-typeset details.info > summary {
  margin: 0;
}
.md-typeset .admonition.info > .admonition-title,
.md-typeset .admonition.example > .admonition-title {
  padding: .6rem 0 .2rem;
}
.md-typeset details.info > summary {
  position: relative;
  min-height: 3.15rem;
  display: flex;
  align-items: center;
  padding: .72rem 6.5rem .72rem 1rem;
  transition: background-color .15s ease;
}
.md-typeset details.info > summary:hover,
.md-typeset details.info > summary:focus-visible {
  background: var(--su-cervena-svetla) !important;
}
.md-typeset details.info > summary:focus-visible {
  outline: 2px solid var(--su-cervena);
  outline-offset: -2px;
}
.md-typeset details.info > summary::before {
  content: "Rozbalit";
  position: absolute;
  top: 50%;
  left: auto;
  right: 2.7rem;
  display: block;
  width: auto;
  height: auto;
  transform: translateY(-50%);
  color: var(--su-cervena);
  background: none !important;
  -webkit-mask-image: none;
  mask-image: none;
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.md-typeset details.info[open] > summary {
  border-bottom: 1px solid var(--su-linka);
}
.md-typeset details.info[open] > summary::before {
  content: "Sbalit";
}
.md-typeset .admonition.info > :not(.admonition-title),
.md-typeset .admonition.example > :not(.admonition-title),
.md-typeset details.info > :not(summary) {
  padding-left: 0;
  padding-right: 0;
}
.md-typeset details.info > :not(summary) {
  margin-left: 1rem;
  margin-right: 1rem;
}
.md-typeset details.info > :last-child {
  margin-bottom: 1rem;
}
.md-typeset details.info > summary::after {
  right: 1rem;
  color: var(--su-cervena);
  background-color: var(--su-cervena);
}

.md-typeset .admonition.danger {
  border-top: 3px solid var(--su-cervena);
  background: var(--sem-cervena-bg);
}
.md-typeset .admonition.warning {
  border-top: 3px solid var(--sem-zluta);
  background: var(--sem-zluta-bg);
}
.md-typeset .admonition.success,
.md-typeset .admonition.tip {
  border-top: 3px solid var(--sem-zelena);
  background: var(--sem-zelena-bg);
}
.md-typeset .admonition.danger > .admonition-title  { color: var(--sem-cervena-text); }
.md-typeset .admonition.warning > .admonition-title { color: var(--sem-zluta-text); }
.md-typeset .admonition.success > .admonition-title,
.md-typeset .admonition.tip > .admonition-title     { color: var(--sem-zelena-text); }

/* Rozbalovací blok potřebuje poznat, že se dá kliknout. */
.md-typeset details > summary { cursor: pointer; }
.md-typeset details[open] { border-left-color: var(--su-cervena); }


/* ================================================== KARTY A TABULKY ==== */

/* Schválená sada prvků pro strukturování úvodu i jednotlivých částí kurzu. */
.md-typeset .blok--duvody > ol,
.md-typeset .blok--panely > ul,
.md-typeset .blok--panely > ol {
  padding: 0;
  list-style: none;
}

/* Očíslované důvody: klidnější než karty, ale čitelné jako čtyři samostatné
   argumenty. */
.md-typeset .blok--duvody > ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.8rem;
  margin: 1.2rem 0 1.8rem;
  counter-reset: duvod;
}
.md-typeset .blok--duvody > ol > li {
  position: relative;
  margin: 0;
  padding: 1rem 0 1.15rem 3rem;
  border-top: 1px solid var(--su-linka);
  counter-increment: duvod;
}
.md-typeset .blok--duvody > ol > li::before {
  content: counter(duvod, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--su-linka);
  border-radius: 50%;
  color: var(--su-cervena);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.md-typeset .blok--duvody strong,
.md-typeset .blok--panely > ul > li > strong:first-child,
.md-typeset .blok--panely > ol > li > strong:first-child,
.md-typeset .blok--panely > ul > li > p:first-child > strong:first-child,
.md-typeset .blok--panely > ol > li > p:first-child > strong:first-child {
  display: block;
  margin-bottom: .3rem;
  color: var(--su-cerna);
  font-family: var(--su-pismo);
  font-size: .82rem;
  line-height: 1.4;
}
.md-typeset .blok--panely > ul > li > strong:first-child,
.md-typeset .blok--panely > ol > li > strong:first-child,
.md-typeset .blok--panely > ul > li > p:first-child > strong:first-child,
.md-typeset .blok--panely > ol > li > p:first-child > strong:first-child {
  color: var(--su-cervena);
}

/* Ohraničené panely. Poslední lichá položka využije celou šířku, aby pod
   dvěma řadami nezůstala osamocená poloviční karta. */
.md-typeset .blok--panely > ul,
.md-typeset .blok--panely > ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin: 1.2rem 0 1.8rem;
}
.md-typeset .blok--panely > ul > li,
.md-typeset .blok--panely > ol > li {
  min-width: 0;
  margin: 0;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid var(--su-linka);
  border-radius: var(--kurz-radius-boxu);
  background: var(--su-pozadi-2);
}
.md-typeset .blok--panely > ol { counter-reset: panel; }
.md-typeset .blok--panely > ol > li { counter-increment: panel; }
.md-typeset .blok--panely > ol > li::before {
  content: "KROK " counter(panel);
  display: block;
  margin-bottom: .45rem;
  color: var(--su-cervena);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.md-typeset .blok--panely > ul > li:last-child:nth-child(odd),
.md-typeset .blok--panely > ol > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Semaforové panely používají barvu v celé ploše, ale význam zůstává vždy
   napsaný v názvu. Tři odstíny proto orientaci podporují, nenahrazují ji. */
.md-typeset .blok--panely-semafor > ul > li {
  border-top-width: 4px;
}
.md-typeset .blok--panely-semafor > ul > li:nth-child(1) {
  border-top-color: var(--sem-zelena);
  background: var(--sem-zelena-bg);
}
.md-typeset .blok--panely-semafor > ul > li:nth-child(2) {
  border-top-color: var(--sem-zluta);
  background: var(--sem-zluta-bg);
}
.md-typeset .blok--panely.blok--panely-semafor > ul > li:last-child:nth-child(odd) {
  grid-column: auto;
  border-top-color: var(--sem-cervena);
  background: var(--sem-cervena-bg);
}
.md-typeset .blok--panely-semafor > ul > li:nth-child(1) > strong:first-child,
.md-typeset .blok--panely-semafor > ul > li:nth-child(1) > p:first-child > strong:first-child {
  color: var(--sem-zelena-text);
}
.md-typeset .blok--panely-semafor > ul > li:nth-child(2) > strong:first-child,
.md-typeset .blok--panely-semafor > ul > li:nth-child(2) > p:first-child > strong:first-child {
  color: var(--sem-zluta-text);
}
.md-typeset .blok--panely-semafor > ul > li:nth-child(3) > strong:first-child,
.md-typeset .blok--panely-semafor > ul > li:nth-child(3) > p:first-child > strong:first-child {
  color: var(--sem-cervena-text);
}

/* Procesní pás ukazuje celý krátký postup v jednom pohledu. Text je záměrně
   úsporný, protože jednotlivé kroky se pod pásem vysvětlují podrobněji. */
.md-typeset .blok--proces > ol { counter-reset: proces; }
.md-typeset .blok--proces > ol > li {
  min-height: 6rem;
  padding: .7rem .65rem .75rem;
  border: 1px solid var(--su-linka);
  border-radius: var(--kurz-radius-boxu);
  background: var(--su-pozadi-2);
  counter-increment: proces;
  font-size: .78rem;
  line-height: 1.45;
}
.md-typeset .blok--proces > ol > li::before {
  content: counter(proces, decimal-leading-zero);
  display: block;
  margin-bottom: .4rem;
  color: var(--su-cervena);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.md-typeset .blok--proces > ol > li > strong:first-child,
.md-typeset .blok--proces > ol > li > p:first-child > strong:first-child {
  display: block;
  margin-bottom: .25rem;
  color: var(--su-cervena);
  font-family: var(--su-pismo);
  font-size: .82rem;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .md-typeset .blok--proces > ol > li { min-height: 0; }
}

@media (max-width: 700px) {
  .blok--titul {
    margin-left: 0;
    margin-right: 0;
    padding: 1.8rem 1rem 2rem;
    border-radius: 0;
  }
  .md-typeset .blok--titul h1 { font-size: 2.25rem; }
  .blok--obraz-vlevo, .blok--obraz-vpravo {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
    padding: .8rem;
  }
  .blok--prirucka {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
    padding: .8rem;
  }
  .blok--prirucka > p:first-child { grid-row: auto; }
  .blok--plocha {
    margin-left: 0;
    margin-right: 0;
    padding: 1.5rem .8rem 1.7rem;
    border-radius: 0;
  }
  .blok--plocha-tmava {
    margin-left: 0;
    margin-right: 0;
    padding: 1.5rem .8rem 1.7rem;
    border-radius: 0;
  }
  .md-typeset .blok--plocha-tmava > ol { grid-template-columns: 1fr; }
  .blok--mozaika {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
    padding: .8rem;
  }
  .blok--mozaika > p:first-child {
    grid-column: 1;
    grid-row: auto;
  }
  .blok--mozaika > p:first-child img { min-height: 0; }
  .md-typeset .blok--mozaika > ul {
    grid-column: 1;
    grid-template-columns: 1fr;
  }
  .md-typeset .blok--duvody > ol,
  .md-typeset .blok--panely > ul,
  .md-typeset .blok--panely > ol { grid-template-columns: minmax(0, 1fr); }
  .md-typeset .blok--panely > ul > li:last-child:nth-child(odd),
  .md-typeset .blok--panely > ol > li:last-child:nth-child(odd) { grid-column: auto; }
}

.k-karta {
  border: 1px solid var(--su-linka);
  border-radius: var(--kurz-radius-boxu);
  padding: 1rem 1.1rem;
  background: var(--su-pozadi);
}
.k-karta > strong, .k-karta strong:first-child {
  font-family: var(--su-pismo);
  font-size: .78rem;
  letter-spacing: .01em;
  color: var(--su-cervena);
}
.k-mrizka { gap: 1.2rem 1.8rem; margin: 1.3rem 0; }

/* Přehled nástrojů používá stejné plně ohraničené, jemně podbarvené karty
   jako panely v modulech. Stručný souhrn zůstává viditelný, proměnlivé
   podrobnosti se otevírají až na vyžádání. */
.md-typeset .k.k-nastroje {
  padding: 0;
  border: 0;
  background: transparent;
}
.k-nastroje .k-kat > h3 {
  margin-bottom: .35rem;
  color: var(--su-cerna);
}
.k-nastroje .k-kat > p {
  max-width: 38rem;
  margin-bottom: 0;
  color: var(--su-seda);
  font-size: .8rem;
}
.md-typeset .k-nastroje details.k-nastroj {
  margin: 0;
  padding: 0;
  border: 1px solid var(--su-linka);
  border-radius: var(--kurz-radius-boxu);
  background: var(--su-pozadi-2);
}
.md-typeset .k-nastroje details.k-nastroj[open] {
  border-color: var(--su-cervena);
}
.md-typeset .k-nastroje .k-nastroj__souhrn {
  margin: 0;
  background: transparent !important;
  cursor: pointer;
}
.md-typeset .k-nastroje .k-nastroj__souhrn:hover,
.md-typeset .k-nastroje .k-nastroj__souhrn:focus-visible {
  background: var(--su-cervena-svetla) !important;
}
.md-typeset .k-nastroje .k-nastroj__souhrn:focus-visible {
  outline: 2px solid var(--su-cervena);
  outline-offset: -2px;
}
.k-nastroj__nazev {
  color: var(--su-cervena);
  font-family: var(--su-pismo);
  font-size: .88rem;
  font-weight: 700;
}
.k-nastroj__popis {
  margin-top: .35rem;
  color: var(--su-cerna);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.55;
}
.k-stitek--tema {
  border: 1px solid var(--su-linka);
  background: var(--su-pozadi);
  color: var(--su-seda);
  font-weight: 600;
}
.k-nastroj__ovladani {
  color: var(--su-cervena);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.k-nastroj__detail {
  border-top: 1px solid var(--su-linka);
  font-size: .76rem;
  line-height: 1.55;
}
.k-nastroj__seznam dt {
  color: var(--su-cerna);
  font-weight: 700;
}
.k-nastroj__seznam dd { color: var(--su-seda); }
.k-nastroj__odkaz { font-weight: 700; }

.md-typeset table:not([class]) { border: 0; font-size: .78rem; }
.md-typeset table:not([class]) th {
  background: transparent;
  border-bottom: 2px solid var(--su-cerna);
  font-family: var(--su-pismo);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--su-cerna);
}
.md-typeset table:not([class]) td { border-bottom: 1px solid var(--su-linka); }

/* Prompty ke zkopírování: klidný blok, ne zvýrazňovač. */
.md-typeset pre > code { font-size: .72rem; line-height: 1.65; }
.md-typeset .highlight { border-left: 2px solid var(--su-linka); }


/* ======================================================== DLAŽDICE ===== */

.k-dlazdice__karta {
  /* Rám je tu pořád, jen je průhledný – proto při najetí nic neposkočí.
     Ve výchozím stavu svítí jen horní linka, při najetí se objeví celý. */
  border: 1px solid transparent;
  border-top-color: var(--su-cerna);
  border-radius: var(--kurz-radius-boxu);
  padding: 1rem 1.15rem .95rem;
  background: transparent;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.k-dlazdice__karta:hover,
.k-dlazdice__karta:focus-visible {
  border-color: var(--su-cervena);
  background: var(--su-pozadi-2);
  transform: translateY(-2px);
  box-shadow: none;
}
.k-dlazdice__karta:focus-visible { outline: 2px solid var(--su-cervena); outline-offset: 3px; }
.k-dlazdice__karta:hover .k-dlazdice__nazev { color: var(--su-cervena); }
.k-dlazdice__sipka { transition: transform .18s ease; }
.k-dlazdice__karta:hover .k-dlazdice__sipka { transform: translateX(4px); }

/* Dlaždice jsou navigace, ne cvičení – nepatří do rámu komponenty. */
.k.k-dlazdice { border: 0; padding: 0; margin: 1.2rem 0 0; }
.k-dlazdice__mriz { gap: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .k-dlazdice__karta, .k-dlazdice__sipka { transition: none; }
  .k-dlazdice__karta:hover { transform: none; }
  .k-dlazdice__karta:hover .k-dlazdice__sipka { transform: none; }
}

.k-dlazdice__pata { border-top: 0; padding-top: 0; }
.k-dlazdice__stav { border: 0; background: transparent; padding: 0; }


/* ============================================ INTERAKTIVNÍ PRVKY ======= */

/* Cvičení zůstávají v rámu — mají být jasně oddělená od čtení. */
.k { border-radius: var(--kurz-radius-boxu); padding: 1.5rem 1.7rem; }
.k .k-nadpis {
  font-family: var(--su-pismo);
  font-size: .66rem;
  letter-spacing: .14em;
}

/* První ukázkové zadání má vedle ikony i srozumitelný text. */
.md-typeset .k-kopirovat-zadani {
  width: auto;
  min-width: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 0 .55rem 0 .35rem;
  color: var(--su-cervena) !important;
  background: var(--su-pozadi);
  border: 1px solid var(--su-linka);
  border-radius: 6px;
  opacity: 1;
}
.md-typeset .k-kopirovat-zadani:hover { background: var(--su-cervena-svetla); }
.md-typeset .k-zadani-s-kopirovanim pre > code { padding-top: 2.4rem; }
.k-kopirovat-zadani__text {
  font-family: var(--su-pismo);
  font-size: .63rem;
  font-weight: 700;
  white-space: nowrap;
}
.k-tl { border-radius: 6px; letter-spacing: .02em; }
.k-otazka, .k-scenar, .k-odhal__karta, .k-porovnani__sloupec,
.k-checklist__polozka, .k-najdi-chybu .k-text {
  border-radius: var(--kurz-radius-boxu);
}
.k-semafor .k-volby { gap: .6rem; }
.k-semafor .k-volba {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.45rem;
  padding: .45rem .85rem;
  border-radius: 6px;
  font-weight: 650;
}
.k-semafor .k-volba::before {
  content: "";
  flex: 0 0 auto;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
}
.k-semafor .k-volba[data-b="zelena"] {
  color: var(--sem-zelena-text);
  background: var(--sem-zelena-bg);
}
.k-semafor .k-volba[data-b="zelena"]::before {
  background: var(--sem-zelena);
  box-shadow: 0 0 0 3px var(--sem-zelena-bg);
}
.k-semafor .k-volba[data-b="zluta"] {
  color: var(--sem-zluta-text);
  background: var(--sem-zluta-bg);
}
.k-semafor .k-volba[data-b="zluta"]::before {
  background: var(--sem-zluta);
  box-shadow: 0 0 0 3px var(--sem-zluta-bg);
}
.k-semafor .k-volba[data-b="cervena"] {
  color: var(--sem-cervena-text);
  background: var(--sem-cervena-bg);
}
.k-semafor .k-volba[data-b="cervena"]::before {
  background: var(--sem-cervena);
  box-shadow: 0 0 0 3px var(--sem-cervena-bg);
}
.k-semafor .k-volba.k-akt {
  box-shadow: inset 0 -3px 0 currentColor;
}
.k-stitek.zelena, .k-dobre .k-porovnani__stitek { color: var(--sem-zelena-text); }
.k-stitek.zluta { color: var(--sem-zluta-text); }
.k-stitek.cervena, .k-spatne .k-porovnani__stitek { color: var(--sem-cervena-text); }
.k-odhal__otazka { font-family: var(--su-pismo-nadpis); font-size: 1rem; font-weight: 400; }


/* =============================================== HLAVIČKA A ZÁPATÍ ===== */

.md-header__title { font-family: var(--su-pismo); font-weight: 700; font-size: .8rem; }
.md-nav { font-size: .72rem; }
.md-nav__title { font-family: var(--su-pismo); letter-spacing: .04em; }
.md-footer__link--prev, .md-footer__link--next { border-radius: 6px; }
.md-footer__title { font-family: var(--su-pismo-nadpis); font-size: .95rem; }

/* Obsah stránky v levém menu ukazuje jen nadpisy druhé úrovně. */
.md-nav--secondary .md-nav { display: none; }


/* -------------------------------------------------- vertikální rytmus ---
   Redakční sazba potřebuje vzduch, ale ne prázdné obrazovky. Tyhle hodnoty
   se ladily podle skutečného textu – když je budete měnit, dívejte se
   na úvodní stránku, tam je bloků nejvíc za sebou. */
.blok--klid { margin: 2.2rem 0; text-align: center; }
.blok--obraz-vpravo, .blok--obraz-vlevo {
  margin-top: 2.8rem;
  margin-bottom: 2.8rem;
}
.blok--pres-sirku { margin-top: 2.4rem; margin-bottom: 2.4rem; }
@media (max-width: 700px) {
  .blok--pres-sirku { margin-left: 0; margin-right: 0; }
  .md-typeset .md-typeset__scrollwrap { margin-left: 0; margin-right: 0; }
  .md-typeset .md-typeset__table { max-width: 100%; overflow-x: auto; }
  .md-typeset .highlight { max-width: 100%; margin-left: 0; margin-right: 0; }
  .md-typeset .tabbed-control--next { right: 16px; }
}
.k { margin: 1.8rem 0; }
.md-typeset h2 + p, .md-typeset h2 + div, .md-typeset h3 + p { margin-top: 0; }
.md-typeset ul, .md-typeset ol { margin: 0 0 1.15em; }

/* ---------------------------------------------- doladění vertikálních mezer
   Sousedící bloky si sčítaly okraje a vznikaly prázdné plochy. Když blok
   následuje hned za odstavcem nebo za nadpisem, horní okraj se zkrátí. */
.md-typeset p + .blok--statement,
.md-typeset p + .blok--klid { margin-top: 1.4rem; }
.md-typeset h2 + .k-mrizka,
.md-typeset h3 + .k-mrizka,
.md-typeset p + .k-mrizka { margin-top: 1rem; }
.k-mrizka + p { margin-top: 1.2rem; }
.blok--statement + p, .blok--klid + p { margin-top: 1.4rem; }
.md-typeset h3 { margin-top: 1.7em; }

/* Paměť postupu v redakčním provedení – bez výplně, jen linkou. */
.k-pokracovat { border-radius: var(--kurz-radius-boxu); background: transparent;
  border-width: 1px 1px 1px 3px; }
.k-pokracovat.k-hotovo-vse { background: transparent; }
.k-dlazdice__znacka { background: transparent; padding: 0; }