/**
 * Režim „Nauč se princip".
 *
 * Barvy jen přes CSS proměnné z DESIGN.md (tmavý režim). Krokovač ukázky a
 * přepínače kontrol dědí ze `styl.css` (`.kroky/.krok`, `.vyber`); tady je
 * jen výklad, postup, blok „pozor" a zpětná vazba u kontrol.
 */

.princip { max-width: 720px; }

/* vizuálně skrytý obsah jen pro čtečku (textová alternativa obrázku ukázky, B4-4) */
.princip-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.princip-nadpis { margin: 6px 0 14px; }

.princip-text {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

.princip-podnadpis {
  margin: 26px 0 12px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-tlumeny);
}

/* číslovaný postup „jak na to" */
.princip-postup {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: postup;
}

.princip-postup li {
  position: relative;
  margin-bottom: 10px;
  padding: 12px 16px 12px 50px;
  border-radius: 14px;
  background: var(--pozadi-tlumene);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  counter-increment: postup;
}

.princip-postup li::before {
  content: counter(postup);
  position: absolute;
  left: 12px;
  top: 11px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fialova);
  /* v tmavém režimu je --fialova světlá → číslo tokenem, ne napevno bílé (A3-31) */
  color: var(--on-brand, #fff);
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
}

/* blok „na tohle si dej pozor" — korálová, aby vizuálně varovala */
.princip-pozor {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cervena-svetla);
  border: 2px solid var(--cervena);
}

.princip-pozor-nadpis {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 15px;
  /* text ≥ 4,5 : 1 (--err je výplň, jako písmo ve světlém režimu jen 3,5 : 1, B4-12) */
  color: var(--err-ink, var(--cervena-tmava));
}

.princip-pozor ul { margin: 0; padding-left: 20px; }

.princip-pozor li {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.princip-pozor li:last-child { margin-bottom: 0; }

/* hotový příklad */
.princip-ukazka {
  padding: 16px;
  border-radius: 16px;
  border: 2px solid var(--ram);
  background: var(--pozadi);
}

.princip-ukazka-zadani {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--text);
}

/* ťukací kontroly */
.princip-kontrola { margin-bottom: 20px; }

.princip-kontrola-otazka {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--text);
}

/* zpětná vazba po zodpovězení — obarvení silnější než výchozí .vyber :checked */
/* výplň tmavším „ink" odstínem + text --on-brand: čitelné ve světlém (bílá na tmavé)
   i tmavém režimu (tmavá na světlé) — dřív bílá na světle zelené/červené v tmavém */
.princip .vyber label.spravne {
  background: var(--ok-ink, var(--uspech));
  border-color: var(--ok-ink, var(--uspech-tmava));
  color: var(--on-brand, #fff);
}

.princip .vyber label.spatne {
  background: var(--err-ink, var(--cervena));
  border-color: var(--err-ink, var(--cervena-tmava));
  color: var(--on-brand, #fff);
}

.princip-kontrola-vysledek {
  margin: 8px 2px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.princip-kontrola-vysledek.ano { color: var(--ok-ink, var(--uspech-tmava)); }
.princip-kontrola-vysledek.ne { color: var(--err-ink, var(--cervena-tmava)); }

/* těžší typy úloh (podtypy obt. 3) — rozbalovací bloky se stejnými částmi jako lekce */
.princip-podtypy-odkaz { margin: -6px 0 12px; }

.princip-podtypy-uvod {
  margin: -4px 0 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-tlumeny);
}

.princip-podtyp {
  margin: 0 0 14px;
  border: 2px solid var(--ram);
  border-radius: 16px;
  background: var(--pozadi);
}

.princip-podtyp > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}

.princip-podtyp > summary::-webkit-details-marker { display: none; }

.princip-podtyp > summary::after {
  content: '▾';
  margin-left: auto;
  flex: none;
  color: var(--text-tlumeny);
  transition: transform .15s;
}

.princip-podtyp[open] > summary::after { transform: rotate(180deg); }

.princip-podtyp > summary:focus-visible {
  outline: 3px solid var(--modra);
  outline-offset: 2px;
  border-radius: 14px;
}

.princip-podtyp-stitek {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fialova-svetla);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.princip-podtyp-telo { padding: 0 16px 16px; }

.princip-podtyp-telo .princip-podnadpis { margin: 20px 0 10px; font-size: 14px; }

.princip-podtyp-telo .princip-kontrola:last-child { margin-bottom: 0; }

/* patka */
.princip-patka {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 2px solid var(--ram);
}

.princip-stav {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-tlumeny);
}

/* seznam témat v rozcestníku lekcí (dlaždice jako na úvodu) */
.princip-uvod { margin: 6px 0 18px; color: var(--text-tlumeny); font-weight: 600; }

@media (max-width: 420px) {
  .princip-text { font-size: 16px; }
  .princip-ukazka { padding: 12px; }
  .princip-ukazka-zadani { font-size: 16px; }
  .princip-podtyp > summary { padding: 12px; font-size: 15px; }
  .princip-podtyp-telo { padding: 0 12px 12px; }
}