/*
  Vzhled testu stylů učení podle vizuálního manuálu (Podrobný vizuální
  a obsahový manuál, v2), který vychází z estetiky učebnice Slabikář
  neformálního vzdělávání.

  Tři věci, které manuál řídí a které se tady nesmí ztratit:

  1. Bílé pozadí, černá kresba. Ikony a ilustrace vystupují právě proto, že
     pod nimi není nic. Aplikace proto vědomě NEMÁ tmavý režim — černá linka
     na tmavém pozadí zmizí a celý princip se obrátí naruby.
  2. Ručně psaný nadpis, čistý bezpatkový text. Nadpisy jdou verzálkami.
  3. Vzdušnost. Boxy a sekce musí dýchat, volný prostor je nosný prvek,
     ne zbytek po sazbě.

  Barevné akcenty se přidělují podle FUNKCE, jak je určuje manuál, ne podle
  toho, co se kam hodí:
    tyrkysová  = výklad a všeobecné informace
    oranžová   = akce a důležité upozornění
    fialová    = praktická část, tedy samotné vyplňování

  Aplikace se používá hlavně na telefonu, takže mobil je výchozí stav a
  širší displeje jsou výjimka (@media min-width), ne naopak.
*/

/* ——— písma ———
   Manuál doporučuje na nadpisy ručně psaný fixový font (Caveat Brush, Amatic
   SC, Permanent Marker) a na text čistý bezpatkový (Open Sans, Montserrat,
   Roboto). Použité jsou Caveat a Inter, které už značka používá jinde a jsou
   ve složce fonty/ jako woff2 — aplikace tak zůstává soběstačná a funguje
   offline i po dvojkliku z file://.

   Rozpad na latin a latin-ext je z Fontsource. Bez latin-ext by chybělo
   ě š č ř ž ů a slovenské ľ ĺ ŕ. */

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(fonty/caveat-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(fonty/caveat-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonty/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonty/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ——— paleta ———
     Kontrast každé barvy proti bílé je ověřený: tyrkysová 5,5:1,
     oranžová 5,2:1, fialová 7,1:1. Všechny projdou WCAG AA i pro běžný text. */
  --bila: #fff;
  --papir: #fbfaf7; /* lomená bílá pro boxy */
  --ink: #141414; /* černá: linky, kresba, nadpisy */
  --text: #2b2926; /* tmavě šedá: tělo textu */
  --text-2: #5a5650; /* tlumené popisky */
  --linka: #e4e0d8;

  --teal: #0f766e;
  --teal-tise: #ccfbf1;
  --oranzova: #c2410c;
  --oranzova-tise: #ffedd5;
  --oranzova-ziva: #f59e0b; /* výplň, ne text: ink na ní má 8,6:1 */
  --fialova: #6d28d9;
  --fialova-tise: #ede9fe;

  /* ——— rozestupy ———
     Manuál stojí na vzdušnosti, proto je stupnice velkorysá. Na mobilu se
     dvě největší hodnoty stahují, jinak by se odpovědi nevešly nad ohyb. */
  --mezera-1: 0.5rem;
  --mezera-2: 1rem;
  --mezera-3: 1.5rem;
  --mezera-4: 2rem;
  --mezera-5: 3rem;

  --radius: 14px;
  --sirka: 46rem;

  --pismo-nadpis: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  --pismo-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Tloušťka linky kresby. Manuál chce „thick marker lines“. */
  --tah: 2.2;
}

@media (min-width: 46rem) {
  :root {
    --mezera-3: 1.75rem;
    --mezera-4: 3rem;
    --mezera-5: 5rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bila);
  color: var(--text);
  font-family: var(--pismo-text);
  font-size: 1.0625rem;
  /* Manuál předepisuje volnější řádkování 1.5 kvůli čitelnosti. */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Boční bezpečné zóny na telefonech s výřezem. Záměrně na body, aby záporné
     okraje ukotveného panelu dál seděly na padding .obal. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.zasobnik {
  display: none;
}

/** Sdílená utilita: viditelné jen pro odečítač obrazovky. */
.jen-pro-ctecku {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.obal {
  max-width: var(--sirka);
  margin: 0 auto;
  padding: var(--mezera-3) var(--mezera-2) var(--mezera-4);
  display: flex;
  flex-direction: column;
  /* 100vh na mobilu počítá s odrolovanou lištou prohlížeče, takže je vždycky
     o kus vyšší než to, co je doopravdy vidět. dvh měří skutečný prostor,
     vh zůstává jako záloha pro starší prohlížeče. */
  min-height: 100vh;
  min-height: 100dvh;
  gap: var(--mezera-3);
}

/* Sloupec natažený přes zbytek výšky. Bez toho by ukotvený panel odpovědí
   neměl kam klouzat: jeho rodič by končil přesně tam, kde panel začíná. */
.obsah {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.obsah > .obrazovka:not([hidden]) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

@media (min-width: 46rem) {
  .obal {
    padding-bottom: var(--mezera-5);
    gap: var(--mezera-4);
  }
}

/* ——— kruhové ikony ———
   Manuál: černá obrysová linka na bílém pozadí, uvnitř dokonalého kruhu.
   Kresba je v zásobníku v index.html, kruh dělá tenhle rámeček. */

.ikona {
  display: block;
  flex: none;
  color: var(--ink);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--tah);
  stroke-linecap: round;
  stroke-linejoin: round;
  background: var(--bila);
  border: 2px solid var(--ink);
  border-radius: 50%;
  padding: 5px;
}

/* Plné části kresby (zrnko písku, tečka otazníku) nemají mít obrys. */
.ikona .vypln {
  fill: currentColor;
  stroke: none;
}

.ikona-velka {
  width: 64px;
  height: 64px;
  margin-bottom: var(--mezera-2);
}

@media (min-width: 30rem) {
  .ikona-velka {
    width: 84px;
    height: 84px;
    margin-bottom: var(--mezera-3);
  }
}

.ikona-stredni {
  width: 56px;
  height: 56px;
}

.ikona-mala {
  width: 32px;
  height: 32px;
  padding: 3px;
  border-width: 1.6px;
}

/* ——— hlavička ——— */

.hlavicka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mezera-2);
  padding-bottom: var(--mezera-2);
  border-bottom: 2px solid var(--ink);
}

.znacka {
  margin: 0;
  font-family: var(--pismo-nadpis);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}

@media (min-width: 26rem) {
  .znacka {
    font-size: 1.375rem;
  }
}

.jazyky {
  display: flex;
  align-items: center;
  gap: var(--mezera-1);
}

.jazyk {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* 44 px je praktické minimum pro dotyk; WCAG 2.5.8 chce aspoň 24. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--bila);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.jazyk-aktivni {
  background: var(--ink);
  color: var(--bila);
}

/* ——— typografie ———
   Nadpisy ručně psaným fontem a verzálkami, jak žádá manuál. Caveat je
   úzké a v majuskulích potřebuje prostrkání, jinak se písmena slepí. */

.nadpis-rukou {
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--ink);
}

h1.nadpis-rukou {
  font-size: clamp(2.5rem, 9vw, 4rem);
  margin: 0 0 var(--mezera-2);
}

h2.nadpis-rukou {
  font-size: clamp(1.875rem, 6vw, 2.375rem);
  margin: 0 0 var(--mezera-2);
}

h3 {
  font-family: var(--pismo-text);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--mezera-1);
}

p {
  margin: 0 0 var(--mezera-2);
}

.lead {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--text);
}

.cas {
  color: var(--text-2);
  font-size: 0.9375rem;
  margin-bottom: var(--mezera-3);
}

/* ——— informační box (tyrkysová = výklad) ——— */

.poznamky {
  margin: var(--mezera-3) 0 0;
  padding: var(--mezera-2);
  background: var(--papir);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--text);
}

.poznamky-teal {
  /* Levý pruh nese barvu funkce, obrys zůstává černý podle manuálu. */
  border-left-width: 8px;
  border-left-color: var(--teal);
  background: var(--teal-tise);
}

.poznamky p:last-child {
  margin-bottom: 0;
}

.soukromi {
  color: var(--text-2);
}

@media (min-width: 30rem) {
  .poznamky {
    padding: var(--mezera-3);
  }
}

/* ——— tlačítka ——— */

.tlacitko {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  min-height: 3.25rem;
  padding: 0.8rem 1.25rem;
  /* Vypne dvojklepové přiblížení i zbytkové zpoždění kliknutí na dotyku. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.12s ease;
}

/* Oranžová je podle manuálu barva akce. */
.tlacitko-hlavni {
  background: var(--oranzova);
  color: var(--bila);
  font-weight: 700;
  font-size: 1.0625rem;
  width: 100%;
}

.tlacitko-tise {
  background: var(--bila);
  color: var(--ink);
  min-height: 2.75rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Na úvodu stojí obě tlačítka pod sebou přes celou šířku. */
.obrazovka-uvod .tlacitko-tise {
  width: 100%;
  min-height: 3.25rem;
  margin-top: var(--mezera-2);
}

.tlacitko:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

/* Hover jen tam, kde opravdu existuje kurzor. Na dotyku by po klepnutí
   zůstal viset a tlačítko by vypadalo jako zvolená odpověď. */
@media (hover: hover) {
  .jazyk:hover {
    background: var(--oranzova-tise);
  }

  .jazyk-aktivni:hover {
    background: var(--ink);
    color: var(--bila);
  }

  .tlacitko-hlavni:hover {
    transform: translateY(-2px);
  }

  .tlacitko-tise:hover:not(:disabled) {
    background: var(--oranzova-tise);
  }

  .tlacitko-volba:hover {
    background: var(--fialova-tise);
    transform: translateY(-2px);
  }
}

/* Okamžitá odezva pod prstem místo zrušeného systémového zvýraznění. */
.tlacitko-volba:active {
  background: var(--fialova-tise);
  transform: scale(0.98);
}

.tlacitko-hlavni:active {
  transform: translateY(1px);
}

:focus-visible {
  outline: 3px solid var(--fialova);
  outline-offset: 3px;
}

/* ——— otázky (fialová = praktická část) ——— */

.prubeh {
  margin-bottom: var(--mezera-3);
}

.prubeh-hlava {
  display: flex;
  align-items: center;
  gap: var(--mezera-2);
  margin-bottom: var(--mezera-1);
}

.prubeh-text {
  margin: 0;
  font-family: var(--pismo-nadpis);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fialova);
}

.prubeh-lista {
  height: 10px;
  background: var(--bila);
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}

.prubeh-vypln {
  display: block;
  height: 100%;
  width: 0;
  background: var(--fialova);
  transition: width 0.2s ease;
}

/* Otázka je h1, ale nesmí vypadat jako nadpis: font-weight a margin-top
   přebíjejí výchozí styl prohlížeče. Pevná výška tady být nemusí, polohu
   odpovědí drží ukotvený panel níž. */
.otazka {
  font-family: var(--pismo-text);
  font-size: clamp(1.375rem, 5.5vw, 2rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 var(--mezera-3);
}

.otazka:focus,
[data-vysledek-nadpis]:focus {
  /* Cíle, na které se po přepnutí obrazovky posílá fokus, aby čtečka přečetla,
     co se změnilo. Mají tabindex="-1", takže se na ně klávesnicí nedá
     dotabovat a viditelný rámeček by tam jen blikal při každém kliknutí. */
  outline: none;
}

/* Panel s odpověďmi. Na telefonu se drží u spodní hrany, takže palec má
   tlačítka vždycky na stejném místě bez ohledu na délku otázky. Bez toho
   odsune dlouhá otázka odpovědi až pod ohyb a u čtyřiceti otázek za sebou
   se tlačítka pod prstem posouvají o stovky pixelů. */
.panel-odpovedi {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--bila);
  border-top: 2px solid var(--ink);
  margin-inline: calc(-1 * var(--mezera-2));
  padding: var(--mezera-2) var(--mezera-2) calc(var(--mezera-1) + env(safe-area-inset-bottom, 0px));
}

.vyzva {
  margin: 0 0 var(--mezera-2);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fialova);
}

/* Ano a Ne jsou krátké, takže se vedle sebe vejdou i na nejužší telefon
   a ušetří skoro sto pixelů výšky. */
.volby {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mezera-2);
}

.tlacitko-volba {
  background: var(--bila);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  min-height: 3.75rem;
}

/* Zvolená odpověď se nepozná jen podle barvy: fajfka funguje i v režimu
   vysokého kontrastu a pro barvoslepé. Lomítko s prázdnými uvozovkami ji
   pro čtečku umlčí (popisek nese skrytý span vedle), první deklarace je
   záloha pro prohlížeče bez podpory alternativního textu. */
.volba-zvolena {
  background: var(--fialova);
  color: var(--bila);
}

.volba-zvolena::before {
  content: '✓';
  content: '✓' / '';
  margin-right: 0.4rem;
  font-weight: 700;
}

.pod-volbami {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mezera-2);
  margin-top: var(--mezera-2);
}

.klavesnice {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* Nápověda ke klávesnici nemá smysl na dotykovém zařízení. */
@media (hover: none) {
  .klavesnice {
    display: none;
  }
}

/* Panel se odlepí jen tam, kde displej má dost místa na výšku i na šířku.
   Samotná šířka nestačí: telefon na šířku je široký 740 px, ale vysoký 360,
   takže právě tam je ukotvení potřeba nejvíc.
   Práh šířky je stejný jako --sirka, jinak by záporné okraje přetekly. */
@media (min-width: 46rem) and (min-height: 40rem) {
  .panel-odpovedi {
    position: static;
    border-top: 0;
    margin-inline: 0;
    padding: 0;
    margin-top: var(--mezera-4);
  }
}

/* Telefon na šířku: viditelná výška kolem 320 px, všechno se musí stáhnout.
   Dlouhá otázka se sem stejně nevejde celá a doroluje se, ale odpovědi
   zůstávají díky ukotvenému panelu pořád pod palcem. */
@media (orientation: landscape) and (max-height: 30rem) {
  .obal {
    padding-top: var(--mezera-2);
    gap: var(--mezera-2);
  }

  .prubeh {
    margin-bottom: var(--mezera-2);
  }

  /* Ikona v řádku průběhu jen roztahuje řádek, text stačí. */
  .prubeh-hlava .ikona-mala {
    display: none;
  }

  .otazka {
    font-size: 1.25rem;
    margin-bottom: var(--mezera-2);
  }

  .vyzva {
    margin-bottom: var(--mezera-1);
  }

  .panel-odpovedi {
    padding-top: var(--mezera-1);
  }

  .tlacitko-volba {
    min-height: 2.75rem;
  }

  .pod-volbami {
    margin-top: var(--mezera-1);
  }

  .ikona-velka {
    width: 48px;
    height: 48px;
  }
}

/* ——— výsledek ——— */

.shoda {
  padding: var(--mezera-2);
  margin-bottom: var(--mezera-3);
  background: var(--oranzova-tise);
  border: 2px solid var(--ink);
  border-left-width: 8px;
  border-left-color: var(--oranzova);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.karta {
  margin-bottom: var(--mezera-3);
  padding: var(--mezera-3) var(--mezera-2);
  background: var(--bila);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}

@media (min-width: 30rem) {
  .karta {
    padding: var(--mezera-4) var(--mezera-3);
  }
}

.karta-hlava {
  display: flex;
  align-items: center;
  gap: var(--mezera-2);
  margin-bottom: var(--mezera-2);
}

.karta-nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  font-size: clamp(2rem, 7vw, 3rem);
  color: var(--ink);
  margin: 0;
}

.karta-vetou {
  font-size: 1.125rem;
  color: var(--ink);
  margin-bottom: var(--mezera-2);
}

.karta-skore {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  margin-bottom: var(--mezera-3);
  background: var(--oranzova-ziva);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}

.karta-popis {
  color: var(--text);
}

.karta-sloupce {
  display: grid;
  gap: var(--mezera-3);
  margin-top: var(--mezera-3);
  padding-top: var(--mezera-3);
  border-top: 2px solid var(--linka);
}

@media (min-width: 36rem) {
  .karta-sloupce {
    grid-template-columns: 1fr 1fr;
  }
}

/* Silné stránky tyrkysově (výklad), na co si dát pozor oranžově
   (důležité upozornění) — přesně podle funkce barev v manuálu. */
.karta-sloupec--silne h3 {
  color: var(--teal);
}

.karta-sloupec--slabe h3 {
  color: var(--oranzova);
}

.karta-sloupec ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9375rem;
}

.karta-sloupec li {
  margin-bottom: 0.45rem;
}

/* ——— přehled skóre ——— */

.prehled {
  margin-top: var(--mezera-4);
}

.tabulka-obal {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}

.tabulka {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabulka th,
.tabulka td {
  text-align: left;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--linka);
}

.tabulka tbody tr:last-child th,
.tabulka tbody tr:last-child td {
  border-bottom: 0;
}

.tabulka thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 700;
  border-bottom: 2px solid var(--ink);
}

.tabulka tbody th {
  color: var(--ink);
  font-weight: 700;
}

.tabulka .cislo {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.radek-vitez th,
.radek-vitez td {
  background: var(--fialova-tise);
}

/* Na úzkém displeji se sloupce nevejdou. Vodorovný posun by schoval zrovna
   sloupec Preference, tedy to jediné, kvůli čemu ta tabulka je, takže se
   místo posouvání každý řádek rozloží na kartu a názvy sloupců se doplní
   před hodnoty.
   POZOR: display: block ruší nativní tabulkové role, proto jsou role table,
   rowgroup, row, columnheader, rowheader a cell uvedené výslovně v index.html
   a v app.js. */
@media (max-width: 33rem) {
  .tabulka,
  .tabulka tbody,
  .tabulka tr,
  .tabulka th,
  .tabulka td {
    display: block;
  }

  .tabulka thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tabulka tr {
    padding: var(--mezera-2) 0;
    border-bottom: 2px solid var(--linka);
  }

  .tabulka tbody tr:last-child {
    border-bottom: 0;
  }

  .tabulka th,
  .tabulka td {
    border-bottom: 0;
    padding: 0.3rem 0.9rem;
  }

  .tabulka tbody th {
    font-family: var(--pismo-nadpis);
    font-size: 1.625rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    padding-bottom: 0.6rem;
  }

  .tabulka td {
    display: flex;
    justify-content: space-between;
    gap: var(--mezera-2);
  }

  /* Popisek je jen vizuální náhrada hlavičky; pro čtečku ho umlčí lomítko
     s prázdnými uvozovkami, protože roli columnheader nese původní buňka. */
  .tabulka td::before {
    content: attr(data-label);
    content: attr(data-label) / '';
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    flex: none;
    align-self: center;
  }
}

.vysvetleni {
  margin-top: var(--mezera-3);
  padding: var(--mezera-1) var(--mezera-2);
  background: var(--teal-tise);
  border: 2px solid var(--ink);
  border-left-width: 8px;
  border-left-color: var(--teal);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.vysvetleni summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  /* Rozklikávací shrnutí je taky dotykový cíl. */
  display: flex;
  align-items: center;
  min-height: 44px;
}

.vysvetleni[open] summary {
  margin-bottom: var(--mezera-2);
}

.vysvetleni p:last-child {
  margin-bottom: 0;
}

.obrazovka-vysledek .tlacitko-hlavni {
  margin-top: var(--mezera-4);
}

/* Easter egg: sazenička roste po kliknutí. Skupiny .rust vyrůstají od země
   (transform-origin u paty stonku), viz data-rust v index.html a app.js. */
.sazenicka {
  cursor: pointer;
}

.sazenicka .rust {
  opacity: 0;
  transform: scale(0.15);
  transform-origin: 24px 38px;
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sazenicka[data-rust='1'] .rust-1,
.sazenicka[data-rust='2'] .rust-1,
.sazenicka[data-rust='2'] .rust-2,
.sazenicka[data-rust='3'] .rust-1,
.sazenicka[data-rust='3'] .rust-2,
.sazenicka[data-rust='3'] .rust-3 {
  opacity: 1;
  transform: scale(1);
}

/* ——— hranice mezi výsledkem a výkladem ———
   Blok, který odděluje skóre od popisů. Tyrkysová podle manuálu, protože
   je to výklad a všeobecná informace, ne akce. */

.k-popisum {
  margin-top: var(--mezera-4);
  padding: var(--mezera-3) var(--mezera-2);
  background: var(--teal-tise);
  border: 2px solid var(--ink);
  border-left-width: 8px;
  border-left-color: var(--teal);
  border-radius: var(--radius);
}

.proc-zvlast {
  font-size: 0.9375rem;
  margin-bottom: var(--mezera-3);
}

/* Restart je po přidání cesty k popisům až druhá volba v pořadí důležitosti,
   takže přestává být hlavním tlačítkem. */
.tlacitko-znovu {
  width: 100%;
  min-height: 3.25rem;
  margin-top: var(--mezera-3);
}

/* ——— popisy stylů ——— */

.popisy-seznam {
  display: grid;
  gap: var(--mezera-2);
  margin-bottom: var(--mezera-4);
}

.popis-styl {
  background: var(--bila);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}

/* Vlastní styl se pozná i bez barvy: silnějším rámečkem a štítkem v hlavičce. */
.popis-styl--vas {
  border-width: 3px;
  box-shadow: 0 0 0 3px var(--fialova-tise);
}

.popis-hlavicka {
  display: flex;
  align-items: center;
  gap: var(--mezera-2);
  /* Rozklikávací hlavička je dotykový cíl, proto 44 px i s malou ikonou. */
  min-height: 44px;
  padding: var(--mezera-2);
  cursor: pointer;
}

.popis-hlavicka-texty {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

.popis-radek-nazvu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.popis-nazev {
  /* h2 uvnitř summary, proto se musí srovnat výchozí styl prohlížeče. */
  margin: 0;
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.popis-skore {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
}

.popis-vas {
  flex: none;
  padding: 0.25rem 0.6rem;
  background: var(--fialova);
  color: var(--bila);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Šipka místo systémového trojúhelníku, který display:flex na <summary>
   potlačí. Po rozbalení se otočí vzhůru. */
.popis-sipka {
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.popis-styl[open] .popis-sipka {
  transform: rotate(180deg);
}

/* Systémový trojúhelník pryč i tam, kde by ho display:flex nechal. */
.popis-hlavicka::-webkit-details-marker {
  display: none;
}

.popis-hlavicka::marker {
  content: '';
}

.popis-telo {
  padding: 0 var(--mezera-2) var(--mezera-3);
  border-top: 2px solid var(--linka);
  margin-top: var(--mezera-1);
  padding-top: var(--mezera-3);
}

.popis-telo .karta-sloupce {
  border-top-width: 1px;
}

@media (min-width: 30rem) {
  .popis-hlavicka {
    padding: var(--mezera-2) var(--mezera-3);
  }

  .popis-telo {
    padding-left: var(--mezera-3);
    padding-right: var(--mezera-3);
  }
}

/* ——— chyba modelu ——— */

.chyba-detail {
  padding: var(--mezera-2);
  background: var(--papir);
  border: 2px solid var(--oranzova);
  border-radius: var(--radius);
  font-size: 0.875rem;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ——— patička ——— */

.paticka {
  padding-top: var(--mezera-3);
  border-top: 2px solid var(--ink);
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* Během vyplňování zdroje nikoho nezajímají a na mobilu jen prodlužují
   stránku pod každou ze čtyřiceti otázek. */
body[data-obrazovka='otazky'] .paticka {
  display: none;
}

.paticka-nadpis {
  font-family: var(--pismo-nadpis);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: 0 0 var(--mezera-1);
}

.paticka ul {
  margin: 0;
  padding-left: 1.15rem;
}

.paticka li {
  margin-bottom: 0.4rem;
}

.paticka a {
  color: var(--teal);
  font-weight: 600;
}

/* ——— režim vysokého kontrastu ———
   Ve forced-colors systém přepíše všechna pozadí a rámečky svou paletou.
   Všechno, co stojí jen na výplni, by tím zmizelo: zvolená odpověď, aktivní
   jazyk, ukazatel průběhu i vítězný řádek tabulky. */
@media (forced-colors: active) {
  .volba-zvolena,
  .volba-zvolena:hover {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  .jazyk-aktivni,
  .jazyk-aktivni:hover {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  .prubeh-vypln {
    background: Highlight;
  }

  /* Pozadí by systém stejně přepsal, rozlišení musí nést linka. */
  .radek-vitez th {
    border-left: 4px solid Highlight;
  }

  .popis-vas {
    background: Highlight;
    color: HighlightText;
  }

  /* box-shadow forced-colors zahazuje, označení musí nést rámeček. */
  .popis-styl--vas {
    border-color: Highlight;
  }

  :focus-visible {
    outline-color: Highlight;
  }

  .tlacitko:disabled {
    color: GrayText;
    border-color: GrayText;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}