/* Kufřík — hravý, ale čitelný. Publikum: děti 1. stupně, průvodci i rodiče.
   Zásady: velké cíle na dotyk (min 44 px), zaoblení a barvy nesou hravost,
   text zůstává klidný a kontrastní — hraje si tvar, ne písmo odstavců. */
@font-face {
  font-family: 'Baloo 2'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/vendor/pisma/baloo-2-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: 'Baloo 2'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/vendor/pisma/baloo-2-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0300-0301, U+030C;
}
@font-face {
  font-family: 'Baloo 2'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/vendor/pisma/baloo-2-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: 'Baloo 2'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/vendor/pisma/baloo-2-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0300-0301, U+030C;
}
:root {
  --zelena: #1f6f5c;
  --zelena-tmava: #175346;
  --okr: #e8a33d;
  --okr-tmavy: #b97b1e;
  --papir: #faf6ec;
  --karta: #ffffff;
  --inkoust: #2b332f;
  --seda: #6b7671;
  --linka: #e8e2d4;
  --chyba: #c14a31;
  --ok: #2e7d32;
  --koralova: #d9604a;
  --nebeska: #5b9bd5;
  --fialova: #8a6fc0;
  --travova: #69a955;
  --ruzova: #d98ab6;
  --tyrkys: #3aa6a0;
  --nadpisy: 'Baloo 2', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Nic nesmí vytlačit stránku do vodorovného scrollu — na úzkých telefonech
   „lezly věci pryč" (hlášeno 31. 8.). `clip` na rozdíl od `hidden` nedělá
   ze stránky scroll kontejner, takže sticky prvky fungují dál. */
html, body { overflow-x: clip; }
body {
  font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--papir);
  color: var(--inkoust);
  padding-bottom: env(safe-area-inset-bottom);
}
button { font: inherit; cursor: pointer; max-width: 100%; }
input, textarea, select { font: inherit; max-width: 100%; }
/* Formulářové prvky NIKDY nevypadají jako holé HTML — všechno je papírová
   komponenta (zadání redesignu 31. 8.). Konkrétnější pravidla níž mají
   přednost, tohle je záchranná síť pro každý select a input bez třídy. */
select {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--linka); border-radius: 12px;
  background-color: var(--karta); color: var(--inkoust);
  padding: 10px 34px 10px 12px; min-height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2377705f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
input[type="text"], input[type="search"], input[type="email"], input[type="number"],
input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"],
textarea {
  border: 1.5px solid var(--linka); border-radius: 12px;
  background: var(--karta); color: var(--inkoust); padding: 10px 12px;
}
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
summary::before { content: '▸  '; color: var(--okr-tmavy); }
details[open] > summary::before { content: '▾  '; }
[hidden] { display: none !important; }

/* ---------- hlavička a navigace ---------- */
header {
  position: sticky; top: 0; z-index: 10;
  background: var(--zelena); color: #fff;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
}
header .mini-kufrik { width: 34px; height: 34px; flex: 0 0 auto; }
header .mini-kufrik img { width: 100%; height: 100%; object-fit: contain; display: block; }
header .titul { font-family: var(--nadpisy); font-weight: 700; font-size: 21px; flex: 1; letter-spacing: .2px; }
/* Jméno se NIKDY nezalamuje ani neroste — dlouhé jméno („Marie Škorpíková“)
   se jinak zlomí na dva řádky a vytlačí „Odhlásit“ mimo obrazovku.
   Nahlásili testeři 28. 8. */
header .kdo {
  font-size: 13px; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 22vw; flex: 0 1 auto; min-width: 0;
}
/* Přepínač školy (jen kdo má víc škol): jméno a pod ním štítek školy.
   Musí být pořád vidět, ve které škole člověk fotí — jinak dá Robíka do dema. */
header button.skola-prepinac {
  background: none; border: none; color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 0;
}
header .skola-jmeno {
  font-size: 11px; background: rgba(255, 255, 255, .18); border-radius: 8px;
  padding: 1px 7px; max-width: 30vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
header .titul { min-width: 0; }
header button.verze {
  background: rgba(255,255,255,.14); border: none; color: #fff;
  border-radius: 10px; padding: 4px 9px; font-size: 12px; font-family: var(--nadpisy); font-weight: 600;
}
header button.odhlasit {
  background: none; border: 1px solid rgba(255,255,255,.4); color: #fff;
  border-radius: 10px; padding: 4px 10px; font-size: 13px; flex: 0 0 auto;
}
/* Na úzkém telefonu (360 px) se do hlavičky nevešlo šest prvků a „Odhlásit"
   zůstalo za okrajem. Verze a přepínač rozložení jsou vymoženosti — na malém
   displeji ustoupí tomu, co je potřeba pořád. */
@media (max-width: 400px) {
  header { gap: 6px; padding: 8px 10px; }
  header .titul { font-size: 19px; }
  /* Zůstává „?" a hlášení chyby — to je pro testera to nejdůležitější. */
  header button.verze.cislo, header button.rozlozeni { display: none; }
  header .kdo { max-width: 60px; }
}
nav.zalozky {
  position: sticky; top: 46px; z-index: 9;
  display: flex; background: var(--zelena-tmava); padding: 0 6px;
}
nav.zalozky a {
  flex: 1; text-align: center; padding: 11px 4px; color: rgba(255,255,255,.72);
  text-decoration: none; font-size: 15px; min-height: 44px;
  font-family: var(--nadpisy); font-weight: 600; border-radius: 12px 12px 0 0;
}
nav.zalozky a.aktivni { color: #fff; background: var(--papir); color: var(--zelena-tmava); }
/* V kompaktní liště základního motivu jsou jen slova; ikony rozehrává až
   hvězdný motiv, kde je z lišty mřížka velkých karet. */
nav.zalozky .zalozka-ikona { display: none; }
nav.zalozky .pocet {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  background: var(--okr); color: #3a2a08; border-radius: 9px; font-size: 12px; font-weight: 700;
}
main { padding: 14px 12px 96px; max-width: 640px; margin: 0 auto; }
h2 { font-family: var(--nadpisy); font-size: 21px; margin: 6px 0 12px; color: var(--zelena-tmava); }

/* ---------- přihlášení ---------- */
.prihlaseni { max-width: 380px; margin: 4vh auto 0; padding: 0 20px; text-align: center; }
.prihlaseni .obrazek-kufriku { width: 190px; margin: 0 auto 6px; }
.prihlaseni .obrazek-kufriku svg { width: 100%; height: auto; }
.prihlaseni h1 { font-family: var(--nadpisy); font-weight: 700; font-size: 34px; margin: 2px 0 0; color: var(--zelena-tmava); }
/* Oficiální logo nese jméno v obrázku — nadpis je tu jen kvůli struktuře
   stránky a odečítači obrazovky, text v něm žádný není. */
.prihlaseni h1.logo-planeta { margin: 0 auto; max-width: 340px; }
.prihlaseni h1.logo-planeta img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 3px 8px rgba(90, 70, 40, .25)); }
.prihlaseni p.pod { color: var(--seda); font-size: 15px; margin: 4px 0 22px; }
button.google-hlavni {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--zelena); color: #fff; border: none; border-radius: 999px;
  padding: 16px 20px; font-size: 18px; font-family: var(--nadpisy); font-weight: 700;
  min-height: 58px; box-shadow: 0 3px 10px rgba(23, 83, 70, .28);
}
button.google-hlavni:active { transform: translateY(1px); }
.google-g {
  background: #fff; border-radius: 50%; width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.google-g svg { width: 18px; height: 18px; }
.heslo-prepinac {
  background: none; border: none; color: var(--seda); font-size: 14px;
  margin-top: 18px; text-decoration: underline; padding: 10px;
}
.heslo-form { text-align: left; margin-top: 6px; }
.heslo-form label { display: block; font-size: 13px; color: var(--seda); margin: 12px 0 4px; }
.heslo-form input {
  width: 100%; padding: 12px; border: 1.5px solid var(--linka); border-radius: 12px;
  background: var(--karta);
}
.heslo-form button.hlavni { width: 100%; margin-top: 14px; }
.chyba-text { color: var(--chyba); font-size: 14px; margin-top: 12px; text-align: center; }

/* ---------- tlačítka ---------- */
button.hlavni {
  background: var(--zelena); color: #fff; border: none; border-radius: 14px;
  padding: 14px 18px; font-size: 17px; font-family: var(--nadpisy); font-weight: 700; min-height: 48px;
}
button.hlavni:disabled { opacity: .5; }
button.vedlejsi {
  background: var(--karta); border: 1.5px solid var(--linka); border-radius: 12px;
  padding: 10px 14px; min-height: 44px;
}
button.nebezpecne { background: none; border: none; color: var(--chyba); padding: 10px; }

/* ---------- třída (domovská) ---------- */
.nahrat-velke {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: var(--okr); color: #3a2a08; border: none;
  border-radius: 999px; padding: 16px; font-size: 20px; font-family: var(--nadpisy); font-weight: 700;
  box-shadow: 0 3px 10px rgba(185, 123, 30, .3); margin-bottom: 18px; min-height: 58px;
}
.nahrat-velke:active { transform: translateY(1px); }
.deti-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dite-karta {
  background: var(--karta); border: 1.5px solid var(--linka); border-radius: 18px;
  padding: 14px 12px; text-align: left; min-height: 64px;
  display: flex; align-items: center; gap: 11px;
}
.dite-karta:active { transform: scale(.98); }
.inicialka {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nadpisy); font-weight: 700; font-size: 21px; color: #fff;
}
.dite-karta .jmeno { font-family: var(--nadpisy); font-weight: 600; font-size: 17px; }
.dite-karta .info { color: var(--seda); font-size: 13px; margin-top: 1px; }
.dite-karta .roste { flex: 1; min-width: 0; }
/* Akvarelový výjev dítěte — kreslí ho hvězdný motiv, základní zůstává u inicál. */
.dite-vyjev { display: none; }
/* Počet pokladů vpravo jako samostatný údaj — v řádku metadat se ztrácel
   a je to to jediné číslo, které se dítěti mění pod rukama. */
.pocet-pokladu {
  margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 3px;
  font-family: var(--nadpisy); font-weight: 700; font-size: 16px; color: var(--okr-tmavy);
}
.pocet-pokladu .ik { color: var(--okr); }

/* Hlavní téma dne — velká ilustrovaná karta v „Dnes pracujeme na".
   Obrázek úlohy (nebo výchozí akvarel) pod tmavým gradientem s názvem. */
.uloha-hlavni {
  display: flex; align-items: flex-end; width: 100%; min-height: 170px;
  border: 1.5px solid var(--linka); border-radius: 16px; margin-bottom: 10px;
  background-color: var(--karta); background-size: cover; background-position: center;
  padding: 0; overflow: hidden; text-align: left; cursor: pointer;
}
.uloha-hlavni:active { transform: scale(.99); }
.uloha-hlavni-text {
  width: 100%; padding: 34px 14px 12px; display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(transparent, rgba(22, 16, 5, .66)); color: #fff;
}
.uloha-hlavni-nazev {
  font-family: var(--nadpisy); font-weight: 700; font-size: 22px; line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.uloha-hlavni-popis { font-size: 13.5px; opacity: .94; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* ---------- nový záznam ---------- */
.krok { background: var(--karta); border: 1.5px solid var(--linka); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.krok h3 { margin: 0 0 10px; font-family: var(--nadpisy); font-size: 15px; color: var(--zelena-tmava); font-weight: 600; }
.vyber-souboru { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vyber-souboru label, .vyber-souboru button.dlazdice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 2px dashed var(--zelena); border-radius: 14px; padding: 12px 4px;
  color: var(--zelena); font-family: var(--nadpisy); font-weight: 600; font-size: 13px;
  text-align: center; min-height: 74px; background: none;
}
.vyber-souboru .ikonka { font-size: 24px; }
.vyber-souboru input { display: none; }
button.dlazdice.nahrava {
  border-style: solid; border-color: var(--koralova); color: var(--koralova);
  background: #fdf0ec; animation: tep 1.2s infinite;
}
@keyframes tep { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 96, 74, .35); } 50% { box-shadow: 0 0 0 8px rgba(217, 96, 74, 0); } }
.vybrane { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vybrane .polozka {
  position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
  background: var(--linka); display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.vybrane .polozka img { width: 100%; height: 100%; object-fit: cover; }
.vybrane .polozka .pryc {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border: none;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 22px;
  padding: 0;
}
.vybrane .polozka .velikost {
  position: absolute; bottom: 0; left: 0; right: 0; font-size: 10px; color: #fff;
  background: rgba(0,0,0,.45); text-align: center;
}
.chipy { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 2px solid var(--linka); background: var(--karta); border-radius: 999px;
  padding: 8px 15px; font-size: 15px; min-height: 42px;
  font-family: var(--nadpisy); font-weight: 600; color: var(--inkoust);
  display: flex; align-items: center; gap: 7px;
}
.chip .tecka { width: 12px; height: 12px; border-radius: 50%; }
.chip.vybrany { border-color: var(--zelena); background: var(--zelena); color: #fff; }
.chip.vsichni { border-style: dashed; color: var(--seda); }
textarea.poznamka {
  width: 100%; min-height: 64px; border: 1.5px solid var(--linka); border-radius: 12px;
  padding: 10px; background: var(--papir); resize: vertical;
}
.ulozit-lista { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--papir) 30%); max-width: 640px; margin: 0 auto; }
.ulozit-lista button { width: 100%; border-radius: 999px; font-size: 18px; min-height: 54px; }

/* ---------- fronta ---------- */
.fronta-polozka { background: var(--karta); border: 1.5px solid var(--linka); border-radius: 18px; padding: 12px; margin-bottom: 10px; }
.fronta-polozka .radek { display: flex; align-items: center; gap: 10px; }
.fronta-polozka .stav-ikona { font-size: 20px; width: 28px; text-align: center; }
.fronta-polozka .popis { flex: 1; min-width: 0; }
.fronta-polozka .popis .nazev { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fronta-polozka .popis .detail { font-size: 12px; color: var(--seda); }
.prubeh { height: 8px; background: var(--linka); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.prubeh .vypln { height: 100%; background: linear-gradient(90deg, var(--zelena), var(--travova)); border-radius: 4px; transition: width .3s; }
.stitek { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.stitek.wifi { background: #fdf1dc; color: #8a5d10; }
.stitek.chyba { background: #fbe4de; color: var(--chyba); }
.stitek.castecny { background: #fdf1dc; color: #8a5d10; }
.stitek.doma { background: #e3edf8; color: #2b5a8c; }
/* Nedodělané z minula — připomínka, ne výtka: teplá, ne červená. */
.stitek.zbylo { background: #fdf1dc; color: #8a5d10; margin-left: 6px; align-self: flex-start; }
.stitek.pocasi { background: #e6f2ea; color: #2c6b47; }
/* Kdo nahrál — tlumeně, je to údaj o původu, ne o dítěti. */
.stitek.autor { background: transparent; color: var(--seda); font-weight: 600; padding-left: 0; }
/* Ohledy na dítě — jen pro dospělé, proto tlumené a bez hravosti. */
/* ---------- kalendář ---------- */
.kalendar-hlava { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.kalendar-hlava h3 { margin: 0; flex: 1; min-width: 150px; }
.kalendar-mrizka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.kal-nazev { text-align: center; font-size: 12px; font-weight: 700; color: var(--seda); padding-bottom: 2px; }
.kal-den {
  min-height: 76px; border: 2px solid var(--linka); border-radius: 14px; background: var(--karta);
  padding: 5px 6px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  text-align: left; font-size: 12px; overflow: hidden;
}
.kal-den.prazdny { border: none; background: none; min-height: 0; }
.kal-den.vikend { background: var(--pozadi); }
.kal-den.svatek { border-color: var(--okr); }
.kal-den.dnes { border-color: var(--zelena); border-width: 3px; }
.kal-den.ma-udalost { box-shadow: inset 0 -4px 0 var(--nebeska); }
.kal-cislo { font-family: var(--nadpisy); font-weight: 700; font-size: 16px; line-height: 1; }
.kal-svatek { color: var(--seda); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.kal-pocasi { color: #2c6b47; }
.kal-skolni { color: var(--nebeska); font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.kal-den.skolni { background: #f0f5fa; }
.vrstvy-blok { margin-bottom: 10px; }
.vrstvy-blok summary {
  cursor: pointer; font-size: 14px; color: var(--seda); font-weight: 700;
  padding: 8px 0; min-height: 36px;
}
.vrstvy { margin-bottom: 10px; }
.vrstvy .chip { padding: 5px 11px; min-height: 32px; font-size: 13px; opacity: .5; }
.vrstvy .chip.vybrany { opacity: 1; }
.historie-den { margin-top: 10px; }
.historie-den ul { margin: 6px 0 0; padding-left: 20px; }
.historie-den li { margin-bottom: 6px; line-height: 1.45; }
/* České položky napřed a zvýrazněné — pro školu v Česku je to to podstatné. */
.historie-seznam li.cesky { border-left: 3px solid var(--zelena); padding-left: 8px; margin-left: -11px; }
.historie-seznam li:not(.cesky) { color: var(--seda); }
.kal-znacky { margin-top: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.kal-poklady { font-weight: 700; }
.kalendar-udalosti { margin-top: 14px; }
.kal-ikona { font-size: 20px; }
@media (max-width: 560px) {
  .kal-den { min-height: 62px; font-size: 11px; padding: 4px; }
  .kal-svatek { display: none; }   /* na telefon se jméno nevejde, zůstane v detailu dne */
}
.odkaz-npi { text-decoration: none; margin-left: 4px; }
.zdroje-npi { margin-bottom: 14px; background: var(--karta); border: 2px solid var(--linka); border-radius: 16px; padding: 12px 16px; }
.zdroje-npi summary { cursor: pointer; font-weight: 700; color: var(--zelena); }
.zdroje-npi ul { margin: 10px 0 0; padding-left: 20px; }
.zdroje-npi li { margin-bottom: 8px; line-height: 1.5; }
/* Komentáře — rozhovor pod pokladem, ne další formulář. */
.komentare { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.komentar {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--pozadi); border-radius: 12px; padding: 8px 12px; font-size: 15px; line-height: 1.45;
}
.komentar .nalepka { font-size: 22px; flex: 0 0 auto; line-height: 1.2; }
.komentare > button { align-self: flex-start; }
.krok.ohledy label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 14px; color: var(--seda); }
.krok.ohledy input, .krok.ohledy textarea {
  font: inherit; font-size: 15px; padding: 9px 12px; border: 2px solid var(--linka);
  border-radius: 12px; width: 100%;
}
/* Dřív to byly jednořádkové inputy a na mobilu z nich nešel text přečíst. */
.krok.ohledy textarea { resize: vertical; line-height: 1.4; }
/* Uvítání pro testery — jednou na zařízení, pak už jen přes „?". */
.dialog.uvitani { max-width: 520px; text-align: left; }
.dialog.uvitani .obrazek-kufriku { width: 130px; margin: 0 auto 4px; }
.dialog.uvitani .obrazek-kufriku svg { display: block; width: 100%; height: auto; }
.dialog.uvitani h3 { text-align: center; }
.dialog.uvitani p { margin: 8px 0; line-height: 1.5; }
.dialog.uvitani ol.napoveda { margin: 4px 0 8px; padding-left: 22px; }
.dialog.uvitani ol.napoveda li { margin-bottom: 6px; line-height: 1.45; }
/* Během čtení se z reproduktoru stane stopka — a je vidět, kde to mluví.
   Obě ikony jsou v tlačítku pořád, jen se přepíná, která je vidět; tlačítko
   proto během čtení nemění šířku. */
.precti.cte { background: var(--okr); border-color: var(--okr); color: #fff; }
.precti { line-height: 0; }
.precti .ik-stop, .precti.cte .ik-cti { display: none; }
.precti.cte .ik-stop { display: inline-block; }
/* Přepis hlasovky — text pod nahrávkou, aby šel číst i prohledávat. */
.prepis {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 8px;
  background: var(--pozadi); border-left: 3px solid var(--nebeska);
  border-radius: 0 10px 10px 0; padding: 8px 12px; font-size: 15px; line-height: 1.45;
}
.prepis-ikona { flex: 0 0 auto; }
.zbylo-blok { margin-top: 12px; border-top: 1px dashed var(--linka); padding-top: 10px; }
.zbylo-blok summary { cursor: pointer; font-size: 14px; color: var(--seda); font-weight: 700; margin-bottom: 8px; }
.prazdno { text-align: center; color: var(--seda); padding: 30px 20px; }
.prazdno .obrazek-kufriku { width: 150px; margin: 0 auto 8px; opacity: .9; }
.prazdno .obrazek-kufriku svg { width: 100%; height: auto; }
.prazdno .ikona { font-size: 40px; }
.prazdno p { font-size: 15px; }

/* ---------- deník ---------- */
/* Filtry deníku pod jedním řádkem. Vidět zůstává jen dítě a hledání. */
.filtry-denik { margin-bottom: 12px; }
.filtry-denik summary {
  cursor: pointer; font-size: 14px; color: var(--seda); font-weight: 700;
  padding: 8px 0; min-height: 36px;
}
.filtry-denik[open] summary { margin-bottom: 6px; }
/* Karta dítěte se rozbalí, až když ji někdo chce — poklady jsou napřed. */
.o-diteti { margin-bottom: 14px; }
.o-diteti > summary {
  cursor: pointer; font-family: var(--nadpisy); font-weight: 600; font-size: 16px;
  color: var(--zelena-tmava); padding: 12px 14px; min-height: 48px;
  background: var(--karta); border: 1.5px solid var(--linka); border-radius: 16px;
}
.o-diteti[open] > summary { border-radius: 16px 16px 0 0; margin-bottom: 0; }
.o-diteti[open] { border: 1.5px solid var(--linka); border-top: none; border-radius: 0 0 16px 16px; }
.o-diteti[open] > summary { margin: -1.5px -1.5px 0; }
.o-diteti .krok { border: none; box-shadow: none; margin-bottom: 0; border-top: 1px dotted var(--linka); border-radius: 0; }

.filtr { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; }
/* Výběr dítěte se ve stejném řádku s hledáním smrskl na samotnou šipku —
   `hledani` má width:100 % a select se dal stlačit na nulu. */
/* `background-color`, ne shorthand — shorthand by umazal šipku selectu. */
.filtr select { flex: 1 1 130px; min-width: 120px; padding: 11px 34px 11px 12px; border: 1.5px solid var(--linka); border-radius: 12px; background-color: var(--karta); }
.filtr input.hledani { flex: 2 1 160px; width: auto; min-width: 140px; }
.filtr .chip { min-height: 44px; }
/* Patka se stránkováním. Většinou je prázdná (stránka se dotahuje sama
   s předstihem) — tlačítko je záloha pro toho, komu automatika nesedla. */
.dalsi-strana { display: flex; justify-content: center; padding: 4px 0 24px; }
.dalsi-strana button { min-width: 220px; }
.dalsi-strana p { margin: 6px 0; }
html[data-rozlozeni="desktop"] main.pohled-denik .dalsi-strana { grid-column: 2; }
.den-nadpis {
  font-family: var(--nadpisy); font-size: 14px; color: var(--seda); font-weight: 600;
  margin: 18px 0 8px; display: flex; align-items: center; gap: 8px;
}
.den-nadpis::after { content: ''; flex: 1; border-top: 2px dotted var(--linka); }
.zaznam-karta { background: var(--karta); border: 1.5px solid var(--linka); border-radius: 18px; padding: 13px; margin-bottom: 12px; }
.zaznam-karta .hlava { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zaznam-karta .cas { color: var(--seda); font-size: 13px; }
.zaznam-karta .deti-jmena { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-family: var(--nadpisy); font-weight: 600; }
.mini-inicialka {
  width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 14px;
  font-family: var(--nadpisy); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.zaznam-karta .poznamka-text { margin: 8px 0 0; white-space: pre-wrap; }
.media-pas { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; }
.media-pas button {
  flex: 0 0 auto; width: 96px; height: 96px; border-radius: 14px; border: 1.5px solid var(--linka);
  overflow: hidden; background: var(--papir); padding: 0; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.media-pas img { width: 100%; height: 100%; object-fit: cover; }
.media-pas .ceka { position: absolute; inset: auto 0 0 0; font-size: 10px; background: rgba(0,0,0,.5); color: #fff; }
/* Trojúhelníček „přehrát" přes náhled videa — v deníku i před uložením */
.prehrat {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; background: rgba(20, 26, 23, .62);
  color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center;
  padding-left: 3px; pointer-events: none;
}
h2.s-avatarem { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
h2.s-avatarem .odkaz-tlacitko { margin-left: auto; }
a.odkaz-tlacitko {
  display: inline-flex; align-items: center; text-decoration: none; color: var(--inkoust);
  font-family: system-ui, sans-serif; font-weight: 400; font-size: 14px;
  background: var(--karta); border: 1.5px solid var(--linka); border-radius: 12px; padding: 6px 12px; min-height: 36px;
}
.vybrane .polozka.klepnutelna { cursor: pointer; }
/* Zalamuje se. Bez toho se pět tlačítek (Do galerie / Navrhnout / Upravit /
   přečíst / Smazat) nevešlo a první z nich vyjelo za LEVÝ okraj obrazovky —
   stránka přitom nepřetékala, takže to kontrola šířky nechytila. */
.zaznam-akce { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.zaznam-akce button { font-size: 14px; padding: 8px 14px; min-height: 40px; }

/* ---------- prohlížeč média ---------- */
.prohlizec {
  position: fixed; inset: 0; background: rgba(10, 14, 12, .96); z-index: 50;
  display: flex; flex-direction: column;
}
.prohlizec .zavrit {
  align-self: flex-end; background: none; border: none; color: #fff; font-size: 30px;
  padding: 12px 18px; min-height: 48px;
}
.prohlizec .obsah { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 8px 20px; min-height: 0; }
.prohlizec img, .prohlizec video { max-width: 100%; max-height: 100%; border-radius: 10px; }
.prohlizec audio { width: 90%; }
.prohlizec .nazev-media { color: #cdd6d1; text-align: center; font-size: 13px; padding-bottom: 14px; }

/* ---------- dialogy a modaly ---------- */
.dialog-pozadi { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; display: flex; align-items: flex-end; }
/* dvh, ne vh: na mobilu se vh počítá z výřezu BEZ lišt prohlížeče, takže
   dialog vyčníval pod spodní lištu a poslední tlačítko se nedalo trefit. */
.dialog {
  background: var(--papir); border-radius: 22px 22px 0 0; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
  max-height: 85vh; max-height: 85dvh; overflow-y: auto;
}
.dialog h3 { margin: 0 0 12px; font-family: var(--nadpisy); color: var(--zelena-tmava); }
/* Řádek tlačítek se ZALAMUJE. Bez toho se pět tlačítek namačkalo do jednoho
   řádku, přeteklo doprava a „Zavřít" zůstalo za okrajem obrazovky
   (nahlásili testeři 28. 8.). Základ 120 px: dvě tlačítka zůstanou stejně
   široká jako dřív, víc jich přeteče na další řádek. */
.dialog .akce { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dialog .akce button { flex: 1 1 120px; }
/* Nástroje průvodce (nakreslit, komu, upravit) — menší a nad hlavním řádkem. */
.dialog .akce.nastroje { margin-top: 14px; gap: 8px; }
.dialog .akce.nastroje button { flex: 0 1 auto; }
/* Poslední řádek tlačítek zůstává přilepený u spodní hrany dialogu.
   U dlouhé úlohy (obrázek + čtyři odstavce) bylo „Zavřít" až o obrazovku níž
   a vypadalo to, že tam není. Obsah roluje za ním. */
/* Spodní odsazení dialogu se přesouvá DOVNITŘ pruhu. Přilepený prvek se totiž
   nedostane pod hranu obsahu, kdežto rolující text tou mezerou prosvítá —
   pod tlačítky se pak míhal konec zadání. Bez odsazení mezera nevznikne. */
.dialog:not(.chat):has(> .akce:last-child) { padding-bottom: 0; }
.dialog:not(.chat) > .akce:last-child {
  position: sticky; bottom: 0; z-index: 1;
  background: var(--papir); border-top: 1.5px solid var(--linka);
  margin: 16px -14px 0; padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
}
/* Menu „…" v hlavičce — co se nepoužívá denně, ale musí být vždy dostupné.
   Dřív to byly tři ikony v hlavičce a na 360 px dvě z nich mizely. */
.menu-seznam { display: flex; flex-direction: column; gap: 8px; }
.menu-radek {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--karta); border: 1.5px solid var(--linka); border-radius: 14px;
  padding: 12px 14px; min-height: 56px; color: var(--inkoust);
}
.menu-radek:active { transform: scale(.99); }
.menu-radek .ik { color: var(--zelena); }
.menu-radek > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-radek b { font-family: var(--nadpisy); font-weight: 600; font-size: 16px; }
.menu-radek .tlumene { font-size: 13px; }

.novinky .verze-blok { margin-bottom: 14px; }
.novinky .verze-cislo { font-family: var(--nadpisy); font-weight: 700; color: var(--zelena-tmava); }
.novinky .oblast { font-weight: 600; color: var(--okr-tmavy); }
.novinky ul { margin: 6px 0 0; padding-left: 20px; }
.novinky li { margin-bottom: 4px; }

/* ---------- místo a reflexe ---------- */
.misto-vlastni {
  width: 100%; margin-top: 8px; padding: 10px 12px; border: 1.5px dashed var(--linka);
  border-radius: 999px; background: var(--papir);
}
.chip.gps { border-style: dashed; color: var(--zelena); }
.reflexe-radek { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.reflexe-radek .otazka { flex: 0 0 120px; font-family: var(--nadpisy); font-weight: 600; color: var(--inkoust); }
.smajlici { display: flex; gap: 6px; flex: 1; }
.smajlik {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 2px solid var(--linka); border-radius: 14px; background: var(--karta); padding: 6px 4px; min-height: 56px;
}
.smajlik .emoji { font-size: 24px; line-height: 1.1; }
.smajlik .popis { font-size: 11px; color: var(--seda); }
.smajlik.vybrany { border-color: var(--okr); background: #fdf3df; }
.smajlik.vybrany .popis { color: var(--okr-tmavy); font-weight: 700; }
.stitek.misto { background: #e6f2ef; color: var(--zelena-tmava); }
.reflexe-stitky { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.reflexe-stitek { background: #fdf3df; color: #6b4a0d; font-size: 12px; padding: 3px 10px; }
.napoveda { padding-left: 18px; margin: 0; }
.napoveda li { margin-bottom: 10px; line-height: 1.4; }

/* ---------- úlohy, galerie, souhlasy ---------- */
nav.zalozky a { font-size: 14px; padding: 11px 2px; }
.ulohy-dne { margin-top: 16px; }
.chip.uloha { padding-right: 6px; }
/* Vyřadit úlohu je nevratné a sedělo to palec od avatarů dětí — na telefonu
   se to plete. Odsazené doleva, s vlastní plochou pro prst. */
.chip-pryc {
  background: none; border: none; color: var(--seda); font-size: 15px;
  padding: 8px; margin-left: 10px; min-width: 40px; min-height: 40px;
  border-left: 1px solid var(--linka); border-radius: 0 999px 999px 0;
}
.chip-pryc:hover { color: var(--chyba); background: #fbe4de; }
.chip-select { padding: 8px 12px; border: 2px dashed var(--linka); border-radius: 999px; background: var(--karta); font-size: 14px; }
.stitek.uloha { background: #eee9f7; color: #4d3d80; }
.stitek.galerie { background: #e3f1ff; color: #1f4f7a; }
.souhlas-box {
  flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fdf3df; border-radius: 12px; padding: 8px 12px; font-size: 14px;
}
.souhlas-box span { flex: 1; min-width: 160px; }
button.hlavni.mala { padding: 8px 14px; min-height: 38px; font-size: 15px; }

/* ---------- AI, RVP, souhrny, diktování ---------- */
.stitek.rvp { background: #e8f0fb; color: #1f3f6e; }
.rvp-stitky { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
button.vedlejsi.ai { border-color: #d9c4f2; background: #f6f0fd; color: #4d3d80; }
.navrh-shrnuti { font-family: var(--nadpisy); font-size: 17px; color: var(--zelena-tmava); margin: 0 0 12px; }
.navrh-seznam { display: flex; flex-direction: column; gap: 8px; }
.navrh-polozka { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1.5px solid var(--linka); border-radius: 12px; background: var(--karta); cursor: pointer; }
.navrh-polozka input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.navrh-polozka .proc { font-size: 13px; color: #4d3d80; margin-top: 3px; }
.stitek.jistota-vysoka { background: #e0f2e6; color: #1e6b3a; }
.stitek.jistota-stredni { background: #fdf1dc; color: #8a5d10; }
.stitek.jistota-nizka { background: #f0efed; color: var(--seda); }
.sekce-ditete section { margin-bottom: 12px; }
.souhrn-karta { background: var(--papir); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.souhrn-karta.navrh { border: 1.5px dashed var(--okr); }
.souhrn-karta p { margin: 6px 0; white-space: pre-wrap; }
textarea.souhrn-text { min-height: 180px; }
.pokryti { display: flex; flex-direction: column; gap: 6px; }
.pokryti-radek { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr 44px; gap: 8px; align-items: center; font-size: 13px; }
.pokryti-pruh { height: 10px; background: var(--linka); border-radius: 5px; overflow: hidden; }
.pokryti-vypln { display: block; height: 100%; background: linear-gradient(90deg, var(--nebeska), var(--zelena)); border-radius: 5px; }
button.diktovat { margin-top: 8px; background: var(--karta); border: 1.5px dashed var(--zelena); color: var(--zelena); border-radius: 999px; padding: 8px 14px; font-family: var(--nadpisy); font-weight: 600; }
button.diktovat.nahrava { border-style: solid; border-color: var(--koralova); color: var(--koralova); background: #fdf0ec; animation: tep 1.2s infinite; }
button.vedlejsi.zapnuto { background: var(--zelena); color: #fff; border-color: var(--zelena); }

/* ---------- planety: dětská mapa dovedností ---------- */
/* Každá oblast RVP je planeta, na kterou se dá doletět. Nejsou to jiná data
   než souhrn oborů u dospělých — je to tentýž souhrn řečený tak, aby dával
   smysl sedmiletému. Prstenec ukazuje, kolik už jsme na té planetě zvládli. */
.soustava {
  display: flex; flex-wrap: wrap; gap: 14px 10px;
  justify-content: center; padding: 12px 6px 6px; margin-bottom: 14px;
}
.planeta {
  flex: 0 0 auto; width: 92px; background: none; border: none; padding: 2px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--nadpisy); font-weight: 600; color: var(--inkoust);
}
.planeta-koule {
  width: 62px; height: 62px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  /* Prstenec říká totéž co proužek u dospělých: zelená doloženo a zvládnuto,
     okrová na začátku, zbytek šedý. */
  background: conic-gradient(var(--travova) 0 var(--zeleno, 0%),
    var(--okr) var(--zeleno, 0%) var(--zacato, 0%), var(--linka) var(--zacato, 0%) 100%);
  box-shadow: 0 2px 6px rgba(23, 83, 70, .12);
}
.planeta-jadro {
  width: 48px; height: 48px; border-radius: 50%; background: var(--karta);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.planeta.zije .planeta-jadro { background: #f2f8f5; }
.planeta-jmeno { font-size: 13px; line-height: 1.2; text-align: center; }
.planeta-pocet { font-size: 12px; color: var(--seda); font-weight: 400; }
.planeta.vybrany .planeta-koule { outline: 3px solid var(--okr); outline-offset: 3px; }
.planeta.vybrany .planeta-jmeno { color: var(--okr-tmavy); }
.soustava + .chip { margin: -6px auto 14px; display: block; }

/* ---------- dětský režim, QR ---------- */
header.detska .titul { font-size: 24px; }
main.detsky { padding-top: 18px; }
.nahrat-velke.obri { font-size: 26px; min-height: 84px; border-radius: 28px; }
.detsky-stav { text-align: center; margin: -8px 0 12px; }
main.detsky .krok h3 { font-size: 20px; }
.detsky-vyber { grid-template-columns: repeat(3, 1fr); }
.detsky-vyber label, .detsky-vyber button.dlazdice { min-height: 110px; font-size: 16px; }
.detsky-vyber .ikonka { font-size: 40px; }
main.detsky .smajlik { min-height: 76px; }
main.detsky .smajlik .emoji { font-size: 34px; }
main.detsky .reflexe-radek .otazka { flex-basis: 100%; }
button.detska-kartička {
  margin-top: 22px; width: 100%; padding: 14px; border-radius: 999px;
  border: 2px dashed var(--okr); background: #fdf3df; color: #6b4a0d;
  font-family: var(--nadpisy); font-weight: 700; font-size: 17px; min-height: 52px;
}
.prohlizec.skener video { max-width: 100%; max-height: 100%; border-radius: 10px; }
.qr-obal { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr-platno { border: 6px solid #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.qr-tisk { display: none; }
@media print {
  body > *:not(.qr-tisk) { display: none !important; }
  .qr-tisk { display: flex !important; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; font-family: system-ui, sans-serif; }
  .qr-tisk h1 { font-size: 48px; margin: 0 0 20px; }
  .qr-tisk img { width: 60mm; height: 60mm; }
  .qr-tisk p { font-size: 18px; color: #444; }
}

/* ---------- správa ---------- */
/* Nadpis sekce a tlačítko vedle něj. Pravidlo bylo dřív jen uvnitř .sprava,
   takže „+ Úloha" u „Dnes pracujeme na" padalo pod nadpis na vlastní řádek. */
.sekce-hlava { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.sekce-hlava h3 { margin: 0; }
.sprava .radek { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--linka); }
.sprava .radek:last-child { border-bottom: none; }
.sprava .roste { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Řádek nastavení, kde vedle popisu stojí select: popis je celý odstavec a
   select se sizuje podle nejdelší volby (Safari na iPhonu obzvlášť), takže
   se text scvrkl na jedno slovo na řádek a ještě se ořezával — hlásil Martin
   1. 9. Řádek proto smí zalomit a select jde v úzkém pod text. */
.sprava .radek:has(> select) { flex-wrap: wrap; align-items: flex-start; }
.sprava .radek:has(> select) .roste { flex: 1 1 200px; overflow: visible; text-overflow: clip; }
/* min-width: 0 je to podstatné: bez něj se select nesmí zmenšit pod svou
   nejdelší volbu (Safari), a to on ten popis odsunul do pruhu po jednom
   slově. Na telefonu jde select rovnou pod text, na desktopu zůstává vedle. */
.sprava .radek:has(> select) select { flex: 0 1 220px; min-width: 0; }
@media (max-width: 560px) { .sprava .radek:has(> select) select { flex: 1 1 100%; } }
.sprava .tlumene, .tlumene { color: var(--seda); font-size: 13px; }
.sprava .neaktivni b, .sprava .neaktivni .tlumene { opacity: .55; }
button.vedlejsi.mala { padding: 6px 12px; min-height: 36px; font-size: 14px; white-space: nowrap; }
.stitek.role { background: #e7f0ec; color: var(--zelena-tmava); }
.formular label { display: block; font-size: 13px; color: var(--seda); margin: 10px 0 4px; }
.formular input, .formular select, .formular textarea {
  width: 100%; padding: 11px; border: 1.5px solid var(--linka); border-radius: 12px; background-color: var(--karta);
}
.formular select { padding-right: 34px; }
/* Bez box-sizing by víceřádkové pole s paddingem přeteklo dialog. */
.formular textarea { box-sizing: border-box; resize: vertical; font: inherit; }
/* Hlášení z berušky ve Správě. Vyřízené zůstávají dohledatelná, jen zšednou. */
.hlaseni-seznam { display: flex; flex-direction: column; gap: 10px; }
.hlaseni {
  background: var(--karta); border: 1.5px solid var(--linka); border-radius: 14px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.hlaseni.vyrizene { opacity: .55; }
.hlaseni .hlava { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.hlaseni .poznamka-text { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.hlaseni .stitek.galerie { font-family: ui-monospace, Consolas, monospace; }
/* Snímek obrazovky je u hlášení to nejcennější — ať je vidět rovnou. */
.hlaseni-snimek {
  max-width: 100%; max-height: 220px; border-radius: 10px;
  border: 1.5px solid var(--linka); cursor: zoom-in; display: block;
}

.heslo-jednou {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; text-align: center;
  padding: 12px; background: var(--karta); border: 2px dashed var(--okr); border-radius: 12px; margin: 8px 0;
  user-select: all;
}
@media (min-width: 760px) {
  main.siroka { max-width: 1000px; }
  .sprava { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .sprava section { margin-bottom: 0; }
}

/* ---------- reakce, čtení nahlas, odbavení, zrcadlo, hledání ---------- */
.reakce { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 14px; }
.reakce-bublina { background: #fdf3df; border-radius: 999px; padding: 4px 11px; }
.reagovat { display: inline-flex; gap: 4px; margin-left: auto; }
.emoji-tlacitko { border: 1.5px solid var(--linka); background: var(--karta); border-radius: 50%; width: 36px; height: 36px; font-size: 17px; padding: 0; }
.emoji-tlacitko.vybrany { border-color: var(--okr); background: #fdf3df; }
.emoji-tlacitko.vzkaz { font-size: 15px; color: var(--seda); }
button.precti { border: 2px solid var(--nebeska); background: #eef5fc; border-radius: 999px; padding: 8px 16px; font-size: 20px; min-height: 44px; }
button.precti.mala { padding: 2px 8px; font-size: 14px; min-height: 30px; margin-left: 6px; border-width: 1.5px; }
main.detsky .zaznam-akce { justify-content: flex-start; }
.detske-ulohy .chip { font-size: 17px; min-height: 52px; padding: 10px 16px; }
.odbaveni .krok { margin: 10px 0 0; }
.akce-odbaveni { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.akce-odbaveni button { flex: 1; }
.zrcadlo { margin-top: 12px; border-style: dashed; }
.zrcadlo-radek { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.zrcadlo-radek .chip { padding: 5px 12px; min-height: 36px; font-size: 14px; }
input.hledani { width: 100%; padding: 10px 12px; border: 1.5px solid var(--linka); border-radius: 999px; background: var(--karta); }

/* ---------- mapa RVP ---------- */
.vyber-ditete { margin-left: auto; padding: 8px 34px 8px 12px; border: 1.5px solid var(--linka); border-radius: 12px; background-color: var(--karta); }
.obory-souhrn { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
/* Název oblasti dostane víc místa než proužek — „Polytechnická výchova
   a praktické činnosti" se do 110 px lámalo na tři řádky. Nad dva řádky
   se ořízne, aby řádky zůstaly stejně vysoké. */
.obor-radek { display: grid; grid-template-columns: minmax(132px, 1.6fr) minmax(56px, 1fr) 44px; gap: 8px; align-items: center; font-size: 13px; }
.obor-pruh { display: flex; height: 12px; background: var(--linka); border-radius: 6px; overflow: hidden; }
.obor-pruh .cast { display: block; height: 100%; }
.obor-pruh .cast.zvladnuto { background: var(--zelena); }
.obor-pruh .cast.dolozeno { background: var(--travova); }
.obor-pruh .cast.dotceno { background: var(--okr); }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; font-size: 13px; color: var(--seda); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda .vzorek { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.legenda .vzorek.zvladnuto { background: var(--zelena); }
.legenda .vzorek.dolozeno { background: var(--travova); }
.legenda .vzorek.dotceno { background: var(--okr); }
.obor-cislo { text-align: right; }
/* Souhrn oblastí je hlavní pohled a klepnutím zúží seznam pod sebou.
   Dřív to uměly jen dětské planety a dospělý dostal rovnou stovku položek. */
.obory-skupina { margin-bottom: 12px; }
.obory-skupina .den-nadpis { margin: 10px 0 6px; }
button.obor-radek {
  width: 100%; background: none; border: 1.5px solid transparent; border-radius: 10px;
  padding: 6px 8px; text-align: left; font: inherit; color: inherit;
}
button.obor-radek:hover { background: var(--karta); }
button.obor-radek.vybrany { border-color: var(--okr); background: #fdf7ec; }
button.obor-radek.vybrany .obor-nazev { font-weight: 700; color: var(--okr-tmavy); }
.zrus-obor { margin: 4px 0 10px; }

/* Kdy se v které oblasti něco dělo — měsíce školního roku vedle sebe. */
.osa-blok { margin: 10px 0 14px; }
.osa-blok summary { cursor: pointer; font-size: 14px; color: var(--seda); font-weight: 700; padding: 8px 0; min-height: 36px; }
.osa { overflow-x: auto; padding-bottom: 4px; }
/* Dvanáct měsíců se na telefon nevejde, takže se roluje do stran — ale název
   oblasti musí zůstat vidět, jinak člověk neví, čí řádek zrovna čte. */
.osa-radek { display: grid; grid-template-columns: 130px repeat(12, minmax(22px, 1fr)); gap: 3px; align-items: center; min-width: 430px; }
.osa-radek + .osa-radek { margin-top: 3px; }
.osa-nazev {
  position: sticky; left: 0; z-index: 1; background: var(--papir);
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 2px; padding-right: 6px;
}
.osa-mesic { font-size: 10px; color: var(--seda); text-align: center; }
.osa-mesic.ted { color: var(--okr-tmavy); font-weight: 700; }
.osa-pole { height: 18px; border-radius: 4px; background: var(--linka); }
.osa-pole.s1 { background: #bfe0b0; }
.osa-pole.s2 { background: var(--travova); }
.osa-pole.s3 { background: var(--zelena); }
.osa-pole.ted { outline: 2px solid var(--okr); outline-offset: -2px; }
.filtry-rvp { margin-bottom: 12px; }
.rvp-seznam { display: flex; flex-direction: column; gap: 8px; }
.rvp-polozka {
  display: flex; gap: 10px; align-items: flex-start; background: var(--karta);
  border: 1.5px solid var(--linka); border-radius: 14px; padding: 10px 12px;
}
.rvp-polozka.nezacato { opacity: .62; }
.rvp-polozka.dolozeno { border-color: var(--travova); }
.rvp-polozka.zvladnuto { border-color: var(--zelena); background: #f2f8f5; }
.rvp-polozka.cil { box-shadow: inset 3px 0 0 var(--okr); }
.rvp-znak { font-size: 19px; line-height: 1.3; flex: 0 0 auto; color: var(--zelena); }
.rvp-polozka.nezacato .rvp-znak { color: var(--seda); }
.rvp-polozka.dotceno .rvp-znak { color: var(--okr-tmavy); }
.rvp-text { flex: 1; min-width: 0; }
.rvp-kod { font-size: 11px; font-family: ui-monospace, Consolas, monospace; margin-top: 2px; }
.rvp-duvod { font-size: 13px; color: var(--zelena-tmava); margin-top: 4px; font-style: italic; }
.rvp-doklad { background: none; border: none; color: var(--nebeska); font-size: 13px; padding: 4px 0 0; text-decoration: underline; }
.rvp-akce { display: flex; gap: 4px; flex: 0 0 auto; }
main.detsky .rvp-polozka { padding: 14px; font-size: 17px; }
main.detsky .rvp-znak { font-size: 26px; }
.detsky-odkaz { width: 100%; margin: -8px 0 14px; border-radius: 999px; min-height: 52px; font-family: var(--nadpisy); font-weight: 600; font-size: 17px; }

/* ---------- ikony oblastí, ŠVP ---------- */
.obor-ikona { margin-right: 6px; font-size: 15px; }
.den-nadpis .obor-ikona { font-size: 16px; }
.obor-nazev {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.25;
}
.stitek.rocnik { background: #e8f0fb; color: #1f3f6e; margin-left: 6px; font-family: system-ui, sans-serif; }
.rvp-kod a { color: var(--nebeska); text-decoration: none; border-bottom: 1px dotted var(--nebeska); }
.rocnik-volby { display: flex; gap: 4px; flex: 0 0 auto; }
.rocnik-tlacitko {
  width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--linka);
  background: var(--karta); font-family: var(--nadpisy); font-weight: 600; padding: 0;
}
.rocnik-tlacitko.vybrany { border-color: var(--zelena); background: var(--zelena); color: #fff; }
button.vedlejsi.ai, button.emoji-tlacitko.ai { border-color: #d9c4f2; background: #f6f0fd; color: #4d3d80; }

/* ---------- dětská mapa: obrázky a detail ---------- */
.rvp-polozka.detska { align-items: center; gap: 14px; cursor: pointer; }
.rvp-obrazek {
  position: relative; width: 68px; height: 68px; flex: 0 0 auto; border-radius: 18px;
  background: #f3efe3; display: flex; align-items: center; justify-content: center; font-size: 34px;
}
.rvp-odznak { position: absolute; right: -4px; bottom: -4px; font-size: 20px; }
.rvp-ukazky { display: flex; gap: 6px; margin-top: 8px; }
.rvp-ukazky img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--linka); }
.rvp-ikona-obri { font-size: 54px; line-height: 1; flex: 0 0 auto; }
.detail-hlava { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.detail-hlava h3 { margin: 0 0 4px; }
.detail-vice { background: var(--papir); border-radius: 12px; padding: 10px 12px; }
.detail-poklady { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-poklad {
  width: 150px; border: 1.5px solid var(--linka); border-radius: 14px; background: var(--karta);
  padding: 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; font-size: 13px;
}
.detail-poklad img { width: 100%; height: 92px; object-fit: cover; border-radius: 10px; }
.detail-poklad .ikona { font-size: 40px; }
.chip-komu {
  background: none; border: none; padding: 6px 8px; margin-left: 4px;
  min-height: 40px; display: inline-flex; gap: 2px; align-items: center;
}
.chip-komu .mini-inicialka { width: 22px; height: 22px; font-size: 12px; }

/* ---------- detail úlohy ---------- */
.chip.klepnutelna { cursor: pointer; }
.chip-info { margin-left: 6px; color: var(--nebeska); font-weight: 700; padding: 0 4px; }
/* Prsty dětí na tabletu chtějí větší cíle než myš na počítači. Doporučení
   je 44 px; menší necháváme jen tam, kde je ovládací prvek uvnitř většího
   klepnutelného celku (ⓘ uvnitř kartičky, která je klepnutelná celá). */
.odkaz-npi { display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; }
.precti.mala { min-width: 40px; min-height: 40px; }
.detske-ulohy { display: flex; flex-direction: column; gap: 10px; }
.detska-uloha {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  border: 2px solid var(--linka); border-radius: 18px; background: var(--karta);
  padding: 12px 14px; min-height: 68px; font-size: 17px;
}
.detska-uloha.vybrany { border-color: var(--okr); background: #fdf3df; }
.detska-uloha .uloha-ikona { font-size: 30px; flex: 0 0 auto; }
.detska-uloha .uloha-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.detska-uloha .uloha-popis { font-size: 14px; color: var(--seda); font-weight: 400; line-height: 1.35; }
.uloha-detail .detail-vice { font-size: 17px; }

/* ---------- obrázky k úlohám ---------- */
/* Dítě, které ještě nečte, pozná kartičku podle obrázku dřív než podle názvu. */
/* Dítě z první třídy pozná úlohu podle obrázku dřív než podle názvu —
   obrázek proto vede a text je jen jedna věta. */
.detska-uloha .uloha-obrazek-velka {
  flex: 0 0 auto; width: 108px; height: 108px; border-radius: 16px; object-fit: cover;
  border: 2px solid var(--linka); background: var(--pozadi);
}
.detska-uloha .precti { flex: 0 0 auto; width: 52px; height: 52px; font-size: 24px; border-radius: 16px; }
.chip-obrazek {
  width: 26px; height: 26px; border-radius: 8px; object-fit: cover;
  margin-right: 6px; vertical-align: -8px;
}
.uloha-obrazek {
  margin: 4px 0 12px; border-radius: 16px; overflow: hidden;
  border: 2px solid var(--linka); background: var(--pozadi);
}
.uloha-obrazek img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.uloha-obrazek.prazdne {
  min-height: 74px; display: flex; align-items: center; justify-content: center;
  border-style: dashed; color: var(--seda); font-size: 14px;
}
.uloha-obrazek.prazdne::after { content: 'Zatím bez obrázku — „Nakreslit obrázek\" níž.'; padding: 8px 14px; text-align: center; }
.kresleni { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kresleni label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--seda); }
.kresleni input { font-size: 16px; padding: 10px 12px; border: 2px solid var(--linka); border-radius: 12px; }
textarea.sablona {
  width: 100%; font: inherit; font-size: 14px; line-height: 1.45; padding: 10px 12px;
  border: 2px solid var(--linka); border-radius: 12px; resize: vertical; background: var(--karta);
}
.radek.sloupec { flex-direction: column; align-items: stretch; gap: 8px; }
/* Přes padesát hlasů — ať se v tom dá rolovat a nezabere to celou obrazovku. */
.hlasy { display: flex; flex-wrap: wrap; gap: 6px; max-height: 250px; overflow-y: auto; padding: 2px; }
.hlasy .chip { text-align: left; }
.hlasy .mala { font-size: 12px; }

/* ---------- deníček dítěte ---------- */
.obdobi-lista { margin-bottom: 12px; }
.obdobi-lista .chip { padding: 6px 14px; min-height: 36px; font-size: 14px; }
.chip.zajem { background: #fdf3df; border-color: var(--okr); }
.zapisek { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dotted var(--linka); }
.zapisek:last-child { border-bottom: none; }
.zapisek-ikona { font-size: 24px; flex: 0 0 auto; line-height: 1.2; }
.smajlici.nalady { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.smajlik.velky { flex: 0 0 auto; width: 58px; min-height: 58px; }
.smajlik.velky .emoji { font-size: 30px; }
.detske-odkazy { display: flex; gap: 10px; margin: -8px 0 14px; }
.detske-odkazy .detsky-odkaz { flex: 1; margin: 0; }

/* ---------- desktopové rozložení ----------
   Zapíná se atributem data-rozlozeni="desktop" na <html> (automaticky od
   900 px, nebo ručně tlačítkem v hlavičce). Mobil zůstává výchozí vzhled. */
html[data-rozlozeni="desktop"] body { font-size: 15px; }
html[data-rozlozeni="desktop"] header { padding: 10px 28px; }
html[data-rozlozeni="desktop"] header .titul { font-size: 24px; }
html[data-rozlozeni="desktop"] nav.zalozky { padding: 0 28px; gap: 4px; justify-content: flex-start; }
html[data-rozlozeni="desktop"] nav.zalozky a { flex: 0 0 auto; padding: 11px 26px; font-size: 15px; }
html[data-rozlozeni="desktop"] main { max-width: 1140px; padding: 22px 28px 40px; }
html[data-rozlozeni="desktop"] main.siroka { max-width: 1140px; }
html[data-rozlozeni="desktop"] h2 { font-size: 24px; }

/* Třída: děti vlevo v mřížce, úlohy dne vpravo */
html[data-rozlozeni="desktop"] main.pohled-trida { display: grid; grid-template-columns: 1fr 360px; gap: 16px 24px; align-items: start; }
html[data-rozlozeni="desktop"] main.pohled-trida .nahrat-velke { grid-column: 1 / -1; width: auto; justify-self: start; min-width: 320px; padding: 14px 40px; margin-bottom: 4px; }
html[data-rozlozeni="desktop"] main.pohled-trida .deti-mrizka { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
html[data-rozlozeni="desktop"] main.pohled-trida .ulohy-dne { margin-top: 0; }

/* Nový záznam: dva sloupce, tlačítko není plovoucí */
html[data-rozlozeni="desktop"] main.pohled-novy { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; align-items: start; }
html[data-rozlozeni="desktop"] main.pohled-novy .krok { margin-bottom: 0; }
html[data-rozlozeni="desktop"] main.pohled-novy .krok:first-child { grid-column: 1 / -1; }
html[data-rozlozeni="desktop"] main.pohled-novy .vyber-souboru { grid-template-columns: repeat(4, 180px); }
html[data-rozlozeni="desktop"] main.pohled-novy .ulozit-lista { position: static; grid-column: 1 / -1; padding: 6px 0 0; background: none; max-width: none; }
html[data-rozlozeni="desktop"] main.pohled-novy .ulozit-lista button { width: auto; min-width: 320px; }

/* Deník: filtr a přehled dítěte vlevo, poklady vpravo ve dvou sloupcích */
html[data-rozlozeni="desktop"] main.pohled-denik { display: grid; grid-template-columns: 340px 1fr; gap: 0 28px; align-items: start; }
html[data-rozlozeni="desktop"] main.pohled-denik h2 { grid-column: 1 / -1; }
html[data-rozlozeni="desktop"] main.pohled-denik .filtr { grid-column: 1; flex-direction: column; align-items: stretch; }
/* Ve sloupci znamená `flex-basis: 130px` VÝŠKU — select i hledání se
   nafoukly na obří boxy (nahlásil Martin 31. 8. na poradě). */
html[data-rozlozeni="desktop"] main.pohled-denik .filtr > * { flex: 0 0 auto; }
html[data-rozlozeni="desktop"] main.pohled-denik .sekce-ditete { grid-column: 1; }
html[data-rozlozeni="desktop"] main.pohled-denik .denik-obsah { grid-column: 2; grid-row: 2 / span 20; }
html[data-rozlozeni="desktop"] .denik-obsah { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; align-content: start; }
html[data-rozlozeni="desktop"] .denik-obsah .den-nadpis { grid-column: 1 / -1; margin: 12px 0 0; }
html[data-rozlozeni="desktop"] .denik-obsah .zaznam-karta { margin-bottom: 0; }
html[data-rozlozeni="desktop"] .denik-obsah .prazdno { grid-column: 1 / -1; }
html[data-rozlozeni="desktop"] .media-pas button { width: 120px; height: 120px; }

/* Mapa RVP: souhrn oborů vlevo, seznam vpravo */
html[data-rozlozeni="desktop"] main.pohled-mapa { display: grid; grid-template-columns: 360px 1fr; gap: 4px 28px; align-items: start; }
html[data-rozlozeni="desktop"] main.pohled-mapa h2,
html[data-rozlozeni="desktop"] main.pohled-mapa > p { grid-column: 1 / -1; }
html[data-rozlozeni="desktop"] main.pohled-mapa .obory-souhrn { grid-column: 1; }
html[data-rozlozeni="desktop"] main.pohled-mapa .filtry-rvp { grid-column: 2; }
html[data-rozlozeni="desktop"] main.pohled-mapa .rvp-seznam { grid-column: 2; }

/* Galerie a fronta */
html[data-rozlozeni="desktop"] main.pohled-galerie .denik-obsah { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
html[data-rozlozeni="desktop"] main.pohled-fronta { max-width: 760px; }
html[data-rozlozeni="desktop"] .dialog { border-radius: 22px; max-width: 720px; align-self: center; }
html[data-rozlozeni="desktop"] .dialog-pozadi { align-items: center; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: var(--inkoust); color: #fff; border-radius: 12px; padding: 10px 18px;
  font-size: 14px; z-index: 60; max-width: 90vw; text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.offline-pruh { background: #8a5d10; color: #fff; text-align: center; font-size: 13px; padding: 6px; }

/* Výklad jména a přírodní rytmus v detailu dne — čte to dospělý dítěti. */
.jmeno-vyklad, .priroda-blok { line-height: 1.5; margin: 8px 0; }
.priroda-blok { background: #f2f7f2; border-radius: 10px; padding: 8px 12px; }

/* ---------- fenologie: cesta stromu ---------- */
/* Sedm zastávek, po kterých strom projde za rok. Ne progress bar — cesta,
   na které je vidět, kam jsme došli, a nic z ní nejde ztratit. */
.fenocesta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fenokrok {
  flex: 1 1 100px; min-width: 96px; min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 2px dashed var(--linka); border-radius: 18px; background: var(--pozadi);
  padding: 8px 6px; text-align: center; color: var(--seda);
}
.fenokrok .fenoznak { font-size: 30px; line-height: 1; filter: grayscale(1); opacity: .5; }
.fenokrok .fenonazev { font-family: var(--nadpisy); font-weight: 600; font-size: 13px; line-height: 1.2; }
.fenokrok .fenodatum { font-size: 12px; font-weight: 700; color: var(--zelena); }
.fenokrok.hotovo {
  border-style: solid; border-color: var(--travova); background: var(--karta); color: var(--inkoust);
}
.fenokrok.hotovo .fenoznak { filter: none; opacity: 1; }
.fenokrok.na-rade { border-color: var(--okr); background: #fdf7ec; color: var(--inkoust); }
.fenokrok.na-rade .fenoznak { filter: none; opacity: .85; }
.strom-karta .sekce-hlava h3 { margin: 0; }
.dialog label input[type="date"] {
  font: inherit; padding: 9px 12px; border: 2px solid var(--linka); border-radius: 12px; margin-top: 4px;
}

/* ---------- pruh roku ---------- */
/* Školní rok jako řada dnů. Ne graf — cesta, na které je vidět, kdy něco
   vzniklo. Sytější políčko = víc pokladů ten den. */
.pruh-dny { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 8px; }
.pruh-mesic {
  font-size: 11px; color: var(--seda); font-weight: 700; text-transform: lowercase;
  width: 100%; margin: 6px 0 1px;
}
.pruh-den {
  width: 13px; height: 13px; border-radius: 4px; border: none; padding: 0;
  background: var(--linka);
}
.pruh-den.s1 { background: #bfe0b0; }
.pruh-den.s2 { background: var(--travova); }
.pruh-den.s3 { background: var(--zelena); }
.pruh-den.dnes { outline: 2px solid var(--okr); outline-offset: 1px; }
.pruh-den.udalost { border-bottom: 3px solid var(--nebeska); height: 16px; }
.pranostika-blok { background: #fdf7ec; border-radius: 10px; padding: 8px 12px; line-height: 1.5; margin: 8px 0; }
/* Zajímavost dne — jedna vybraná věc z devíti vrstev. Zbytek je pod čarou. */
.tip-dne { border-top: 2px dotted var(--linka); margin-top: 12px; padding-top: 10px; }
.tip-dne .tip-stitek {
  display: block; font-family: var(--nadpisy); font-weight: 700; font-size: 12px;
  letter-spacing: .4px; text-transform: uppercase; color: var(--okr-tmavy); margin-bottom: 4px;
}
.tip-dne > p:last-child, .tip-dne > div:last-child { margin-bottom: 0; }
.vic-o-dni { margin-top: 10px; border-top: 2px dotted var(--linka); padding-top: 8px; }
.vic-o-dni summary {
  cursor: pointer; font-size: 14px; color: var(--seda); font-weight: 700;
  padding: 8px 0; min-height: 36px;
}
.vic-o-dni[open] summary { margin-bottom: 4px; }
.ukaz-blok { background: #eef1f8; border-radius: 10px; padding: 8px 12px; line-height: 1.5; margin: 8px 0; }
/* Tradice: čtyři vrstvy, čtyři odstíny — aby šlo od pohledu poznat, jestli
   je to zákon, lidový zvyk, mezinárodní den, nebo recese. Levý proužek dělá
   rozdíl i tomu, kdo barvy nerozliší. */
.tradice-blok {
  border-radius: 10px; padding: 8px 12px; line-height: 1.5; margin: 8px 0;
  border-left: 4px solid var(--linka); background: #f6f6f4;
}
.tradice-blok.vyznamne { background: #f3f1ea; border-left-color: var(--okr); }
.tradice-blok.zvyky { background: #fbf1ee; border-left-color: #c47a5a; }
.tradice-blok.mezinarodni { background: #eef4f7; border-left-color: var(--nebeska); }
.tradice-blok.zabava { background: #f6f2f8; border-left-color: #9a7fb8; }
.tradice-delat { display: block; margin-top: 4px; font-size: 14px; color: var(--okr-tmavy); }
/* Filtr vrstev: hromadná tlačítka nahoře, pak skupiny s nadpisem. */
.vrstvy-hromadne { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.vrstvy-skupina + .vrstvy-skupina { margin-top: 10px; }
.vrstvy-nadpis {
  font-family: var(--nadpisy); font-weight: 700; font-size: 12px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--seda); margin-bottom: 4px;
}
.dedictvi-seznam li { margin-bottom: 8px; line-height: 1.45; }
.stitek-unesco {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--nebeska); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.vylety-blok { background: #f5f2fa; border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.vylety-blok ul { margin: 4px 0 0; padding-left: 20px; }
.vylety-blok li { margin-bottom: 6px; line-height: 1.45; }

/* Narozeniny — pro dítě největší událost roku, tak ať jsou vidět. */
.narozeniny-lista {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px;
  background: #fdf1f6; border: 2px solid var(--ruzova); border-radius: 16px;
  padding: 10px 14px; font-size: 16px;
}
.narozeniny-blok { background: #fdf1f6; border-radius: 10px; padding: 8px 12px; font-size: 17px; margin: 8px 0; }
/* Portrét místo iniciály — dítě se pozná podle obrázku dřív než podle písmene. */
.inicialka.portret, .mini-inicialka.portret { object-fit: cover; padding: 0; }
/* ---------- vlastní ikony ---------- */
/* Jedna sada místo emoji: stejná tloušťka, stejná barva, na každém telefonu
   stejný tvar. Velikost se odvozuje od písma vedle, aby ikona v nadpisu
   rostla s nadpisem a v tlačítku s tlačítkem. */
.ik {
  width: 1.25em; height: 1.25em; flex: 0 0 auto;
  vertical-align: -.22em; display: inline-block;
}
h2 .ik, h3 .ik { margin-right: .3em; opacity: .9; }
button .ik { vertical-align: -.24em; }
.ik.velka { width: 1.7em; height: 1.7em; vertical-align: -.42em; }
.ik.mensi { width: 1.05em; height: 1.05em; stroke-width: 2; }
header .ik { width: 22px; height: 22px; vertical-align: -.3em; stroke-width: 1.9; }
/* Tlačítka v hlavičce nesou jen ikonu — text je v `title` a aria-label. */
header button.verze.ikonove { padding: 6px 8px; line-height: 0; }

/* ---------- lištička ---------- */
/* Průvodkyně dětského režimu. Není to ikona, je to postava — proto barevná
   a proto vždycky něco říká. */
.liska-obrazek { width: 64px; height: 64px; flex: 0 0 auto; display: block; }
.liska-obrazek.mala { width: 46px; height: 46px; }
.liska-obrazek.velka { width: 108px; height: 108px; }
.liska-rika {
  display: flex; align-items: flex-start; gap: 10px; margin: 10px 0;
}
.liska-bublina {
  position: relative; flex: 1; min-width: 0;
  background: var(--karta); border: 2px solid var(--linka); border-radius: 16px;
  padding: 10px 14px; line-height: 1.45;
}
/* Špička bubliny míří k lištičce. Dva trojúhelníky přes sebe = obrys i výplň. */
.liska-bublina::before, .liska-bublina::after {
  content: ''; position: absolute; left: -9px; top: 16px;
  border: 9px solid transparent; border-right-color: var(--linka); border-left: 0;
}
.liska-bublina::after { left: -6px; border-right-color: var(--karta); }
.liska-bublina p { margin: 0; }
.liska-bublina p + p { margin-top: 6px; }
.liska-bublina .akce { margin-top: 10px; }
/* V dětském režimu mluví lištička větším písmem — čte to prvňák. */
main.detsky .liska-bublina { font-size: 18px; }
main.detsky .liska-obrazek { width: 76px; height: 76px; }

/* Odpověď lištičky nad daty (pro dospělé) — text i s odkazy na poklady. */
.liska-odpoved { white-space: pre-wrap; line-height: 1.55; margin: 0; }

/* ---------- rozhovor s lištičkou ---------- */
/* Chová se jako chat, protože to chat je: jedna odpověď skoro nikdy nestačí
   a člověk se chce doptat na detail. Vlákno roluje, řádek pro psaní zůstává
   dole na očích — na telefonu je hned vidět, kam se píše. */
.dialog.chat {
  display: flex; flex-direction: column; padding: 0;
  height: 88dvh; max-height: 88dvh; overflow: hidden;
}
.chat-hlava {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 12px 14px; border-bottom: 1.5px solid var(--linka); background: var(--karta);
  border-radius: 22px 22px 0 0;
}
.chat-hlava h3 { margin: 0; flex: 1; min-width: 0; }
.chat-hlava .ik { color: var(--zelena); }
.chat-hlava .vyber-ditete { margin: 0; max-width: 40vw; padding: 6px 10px; font-size: 14px; }
.chat-zavrit {
  background: none; border: none; color: var(--seda); font-size: 20px;
  min-width: 44px; min-height: 44px; padding: 0; flex: 0 0 auto;
}
.chat-vlakno {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.chat-zprava { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; }
.chat-zprava.od-lisky { align-self: flex-start; }
.chat-zprava.moje { align-self: flex-end; }
.chat-zprava .liska-obrazek { width: 34px; height: 34px; flex: 0 0 auto; }
.chat-bublina {
  background: var(--karta); border: 1.5px solid var(--linka); border-radius: 16px 16px 16px 4px;
  padding: 10px 14px; line-height: 1.5; min-width: 0;
}
.chat-zprava.moje .chat-bublina {
  background: var(--zelena); color: #fff; border-color: var(--zelena);
  border-radius: 16px 16px 4px 16px; white-space: pre-wrap;
}
.chat-bublina p { margin: 0; }
.chat-bublina p + p { margin-top: 8px; }
/* Přečti nahlas + dny, ze kterých odpověď čerpá. */
.chat-akce { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.chat-akce .chip { font-size: 13px; min-height: 36px; padding: 5px 12px; }
.chat-akce .precti.mala { margin-left: 0; }
.chat-navrhy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-navrhy .chip { font-size: 14px; min-height: 40px; text-align: left; }
/* Návrhy k poslední odpovědi stojí ve vlákně samostatně, ne v bublině. */
.chat-vlakno > .chat-navrhy { margin: -4px 0 0 42px; }

/* Tři tečky — bez nich není poznat, jestli se něco děje, nebo to spadlo. */
.chat-tecky { display: inline-flex; gap: 5px; padding: 3px 2px; }
.chat-tecky i { width: 8px; height: 8px; border-radius: 50%; background: var(--seda); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .chat-tecky i { animation: tecka 1.3s ease-in-out infinite; }
  .chat-tecky i:nth-child(2) { animation-delay: .18s; }
  .chat-tecky i:nth-child(3) { animation-delay: .36s; }
}
@keyframes tecka { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }

.chat-psani {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px 6px; border-top: 1.5px solid var(--linka); background: var(--karta);
}
textarea.chat-vstup {
  flex: 1; min-width: 0; resize: none; font: inherit; line-height: 1.4;
  padding: 11px 14px; border: 1.5px solid var(--linka); border-radius: 20px;
  background: var(--papir); max-height: 110px; min-height: 44px;
}
textarea.chat-vstup:focus { outline: 2px solid var(--zelena); outline-offset: -1px; }
.chat-odeslat {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; padding: 0; border: none;
  background: var(--zelena); color: #fff; line-height: 0;
}
.chat-odeslat:disabled { opacity: .45; }
.chat-odeslat .ik { width: 26px; height: 26px; vertical-align: 0; }
button.diktovat.mala {
  margin: 0; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  padding: 0; line-height: 0; border-width: 1.5px;
}
button.diktovat.mala .ik { width: 24px; height: 24px; vertical-align: 0; }
.chat-patka { flex: 0 0 auto; margin: 0; padding: 0 14px 10px; font-size: 12px; text-align: center; }
/* Odkaz v běžícím textu — vypadá jako odkaz, ale je to tlačítko. */
button.odkaz-text {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--nebeska); text-decoration: underline; cursor: pointer;
}
/* Výpis toho, co jde modelu — čte se to jako text, ne jako tabulka. */
pre.podklady {
  white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.45;
  background: var(--karta); border: 1.5px solid var(--linka); border-radius: 12px;
  padding: 10px 12px; margin: 6px 0 0; max-height: 40vh; overflow: auto;
}
/* Na počítači nemá chat zabírat celou výšku okna. */
html[data-rozlozeni="desktop"] .dialog.chat { height: 78dvh; max-height: 680px; }

/* ---------- hvězdné nebe ---------- */
/* Jen na prázdných plochách — přihlášení, prázdné stavy, dětská hlavička.
   Nikdy za obsahem: pod fotkou dítěte by hvězdy jen ubraly kontrast.

   Dlaždice z radial-gradientů, ne SVG: SVG s preserveAspectRatio="none"
   udělalo v široké nízké hlavičce z hvězd rozmáznuté čárky. Dlaždice
   v pixelech drží kolečka kulatá při každém poměru stran. */
.pod-hvezdami { position: relative; }
.pod-hvezdami > *:not(.nebe) { position: relative; z-index: 1; }
.nebe {
  --hvezda: rgba(232, 163, 61, .55);
  --hvezda-slaba: rgba(232, 163, 61, .3);
  position: absolute; inset: 0; display: block;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 11% 17%, var(--hvezda) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at 27% 41%, var(--hvezda-slaba) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 44% 12%, var(--hvezda) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 61% 33%, var(--hvezda-slaba) 0 1.6px, transparent 1.7px),
    radial-gradient(circle at 78% 8%, var(--hvezda) 0 1px, transparent 1.1px),
    radial-gradient(circle at 91% 29%, var(--hvezda-slaba) 0 1.3px, transparent 1.4px),
    radial-gradient(circle at 7% 63%, var(--hvezda) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 34% 77%, var(--hvezda-slaba) 0 1px, transparent 1.1px),
    radial-gradient(circle at 52% 58%, var(--hvezda) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at 69% 88%, var(--hvezda-slaba) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 86% 68%, var(--hvezda) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 19% 93%, var(--hvezda-slaba) 0 1.4px, transparent 1.5px);
  background-size: 250px 185px;
  background-repeat: repeat;
}
/* Na zelené hlavičce svítí hvězdy bíle, ne okrově — a hustěji, protože
   hlavička je nízká a jedna dlaždice by v ní byla skoro prázdná. */
header .nebe {
  --hvezda: rgba(255, 255, 255, .5); --hvezda-slaba: rgba(255, 255, 255, .24);
  background-size: 150px 66px;
}
/* Nenápadné dýchání celé vrstvy. Kdo má vypnuté animace, uvidí klidné nebe. */
@media (prefers-reduced-motion: no-preference) {
  .nebe { animation: blikani 9s ease-in-out infinite; }
}
@keyframes blikani { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* Přihlašovací obrazovka je jediná úplně prázdná plocha v aplikaci —
   tady se nebe roztáhne přes celý výřez a dostane i „jeho" hvězdu. */
.prihlaseni { position: relative; }
.prihlaseni .nebe { inset: -8vh -14vw auto; height: 74vh; }
/* Jedna velká pětipaprsková hvězda. Malý princ se na svou dívá z dálky. */
.prihlaseni .nebe::after {
  content: ''; position: absolute; right: 15%; top: 8%;
  width: 26px; height: 26px; background: var(--okr); opacity: .5;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.prazdno { position: relative; }
header.detska { overflow: hidden; }

/* Náhled přiloženého snímku v hlášení chyby. */
.snimek-nahled { position: relative; margin-top: 8px; }
.snimek-nahled img { max-width: 100%; max-height: 220px; border-radius: 12px; border: 2px solid var(--linka); }
.snimek-nahled .chip-pryc { position: absolute; top: 4px; right: 4px; background: var(--karta); border-radius: 999px; }

/* --- zakázky: zásobník, čtyřpolí výměny, ovzduší ---------------------- */
/* Zásobník je jediný dialog v aplikaci, kde je toho vidět hodně naráz —
   průvodce si v něm ráno vybírá. Proto širší než ostatní. */
.dialog.siroky { max-width: 760px; }
.zasobnik .sekce-hlava { margin-bottom: 8px; }
.zakazka-karta {
  border: 2px solid var(--linka); border-radius: 16px; padding: 10px 12px;
  margin-bottom: 10px; background: var(--karta);
}
.zakazka-hlava { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.zakazka-hlava .stitek { background: var(--linka); color: var(--seda); }
.zakazka-karta p { margin: 4px 0 8px; }
.napady { margin-top: 18px; border-top: 2px dashed var(--linka); padding-top: 12px; }
.napady h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.napady-skupina { margin-bottom: 6px; }
.napady-skupina summary { cursor: pointer; padding: 6px 0; font-weight: 600; }
.napady-skupina .chipy { padding: 4px 0 10px; }

/* Čtyřpolí: co dostane a co dá každá strana. Dvě dvojice pod sebou —
   na telefonu to musí zůstat čitelné, tak žádná tabulka. */
.vymena { border-left: 3px solid var(--linka); padding-left: 10px; margin: 10px 0; }
.vymena-radek { display: flex; gap: 8px; padding: 3px 0; font-size: 14px; }
.vymena-popisek { color: var(--seda); flex: 0 0 42%; }
.vymena-blok { margin-top: 10px; }
.vymena-blok summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.vymena-blok p { margin: 2px 0 0; }

.ovzdusi-radek { cursor: help; }

/* Lišta o přejmenování na staré adrese. Nesmí vypadat jako chyba — je to
   oznámení, ne varování, tak papír a zlatá, ne červená. */
.pruh-adresy {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 10px 0; padding: 9px 12px; font-size: 14px;
  background: #fdf3df; border: 1.5px solid #e5cf9c; border-radius: 14px; color: #6b4a0d;
}
.pruh-adresy a { color: inherit; font-weight: 700; }

/* --- beruška: hlášení chyby ------------------------------------------- */
/* Pro testera je tohle nejdůležitější tlačítko v aplikaci a v bílé lince
   hlavičky ho nikdo nenašel. Je to malovaná beruška bez podkladu (dodal
   uživatel 1. 9.) — žádná destička ani prstenec, ty se v hlavičce četly jako
   bílý rám. Obrázek je jenom brouk, ne medailon: v kolečku z papíru byla
   beruška při 30 px tak malá, že ji nebylo poznat. */
header button.verze.beruska {
  background: none; box-shadow: none; padding: 2px;
}
header button.verze.beruska .beruska-obr {
  width: 34px; height: 28px; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}
header button.verze.beruska:hover, header button.verze.beruska:focus-visible {
  background: none;
}
header button.verze.beruska:hover .beruska-obr,
header button.verze.beruska:focus-visible .beruska-obr { transform: scale(1.08); }

/* --- klíčové kompetence jako SMĚR u mladších dětí --------------------- */
/* Uzlový bod mají až v 5. ročníku, ale rozvíjejí se od první třídy. Musí být
   vidět, jinak mapa u druháka tvrdí, že se na nich nepracuje — a zároveň se
   nesmí tvářit jako nesplněný výkaz, proto tlumeně a bez poměru. */
.stitek.smer {
  background: #eef2f7; color: #4a5b70; font-weight: 600; margin-left: 6px;
}
.obory-skupina.smer .obory-souhrn { opacity: .88; }
.obory-skupina.smer .den-nadpis { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.obory-skupina.smer > p.tlumene { margin: 2px 0 8px; }

/* --- graf pokroku k uzlovému bodu ------------------------------------- */
/* Vědomě střídmé: je to podklad k rozhodnutí průvodce, ne dashboard. Žádná
   plošná červená — ta je vyhrazená pro oblasti bez jediného dokladu, a i tam
   jde o to, co škola nezdokumentovala, ne o dítě. */
.graf-blok .graf-pokroku { width: 100%; height: auto; margin: 6px 0 4px; overflow: visible; }
.graf-mrizka { stroke: var(--linka); stroke-width: 1; }
.graf-mrizka.slaba { stroke-dasharray: 2 4; opacity: .7; }
.graf-cara { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.graf-odhad { stroke-width: 2; stroke-dasharray: 5 4; opacity: .75; }
.graf-milnik { stroke-width: 1.6; stroke-dasharray: 4 3; opacity: .85; }
.graf-dnes { stroke: var(--seda); stroke-width: 1; stroke-dasharray: 1 3; }
.graf-popisek { font-size: 10px; fill: var(--seda); font-family: inherit; }
.graf-popisek.konec { text-anchor: end; }
.graf-popisek.milnik { font-weight: 700; }
.graf-popisek.dnes { font-weight: 700; }
.graf-legenda { display: flex; flex-direction: column; gap: 3px; font-size: 13px; margin-top: 4px; }
.graf-legenda .vzorek { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.graf-ticho {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: #fff5f2; color: #8d3226; font-size: 13px;
}
/* Osmkrát „Klíčová kompetenc…" pod sebou se nedalo rozlišit — sloupec je širší
   a název se smí zalomit do dvou řádků. */
.osa-radek { grid-template-columns: 152px repeat(12, minmax(22px, 1fr)); align-items: stretch; }
.osa-nazev {
  white-space: normal; line-height: 1.15; overflow: visible;
  align-items: center; min-height: 22px; padding-block: 2px;
}
.osa-pole { min-height: 18px; height: auto; }

/* Výhrada nad mapou: čte se dřív než čísla, ale nesmí vypadat jako varování —
   je to upřesnění, ne poplach. */
.mapa-vyhrada {
  margin: 8px 0 12px; padding: 8px 10px; border-radius: 10px;
  background: var(--karta); border-left: 3px solid var(--linka);
  font-size: 13px; color: var(--seda); line-height: 1.4;
}
.mapa-vyhrada .ik { vertical-align: -.18em; margin-right: 2px; }

/* Popis fotky bývá na čtyři věty — v kartě pokladu se zkrátí a rozbalí se
   klepnutím. Bez toho zabíral půl obrazovky u každé fotky. */
.popis-fotky .popis-text { cursor: pointer; }
.popis-fotky .popis-text.zkraceny {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kdy se to stalo — jeden řádek pod vybranými soubory, ne další krok. */
.kdy-radek {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; font-size: 13px; color: var(--seda);
}
.kdy-radek:empty { display: none; }
.kdy-radek b { color: var(--text); }
.kdy-vstup {
  padding: 8px 10px; border: 1.5px solid var(--linka); border-radius: 10px;
  background: var(--karta); font: inherit; font-size: 14px; max-width: 100%;
}

/* Psaní popisu: fotka a text vedle sebe. Popisovat obrázek, který u toho
   člověk nevidí, nedává smysl — a čtyřřádkové pole na čtyřvětý text taky ne. */
.popis-dialog .popis-mrizka { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
.popis-dialog .popis-nahled { padding: 0; border: none; background: none; cursor: zoom-in; }
.popis-dialog .popis-nahled img {
  width: 100%; border-radius: 12px; border: 2px solid var(--linka); display: block;
}
.popis-dialog .popis-vstup { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.popis-dialog .popis-pole { min-height: 220px; resize: vertical; }
@media (max-width: 700px) {
  .popis-dialog .popis-mrizka { grid-template-columns: 1fr; }
  .popis-dialog .popis-nahled img { max-height: 180px; width: auto; margin: 0 auto; }
  .popis-dialog .popis-pole { min-height: 160px; }
}
.puvod-popisu { background: var(--linka); color: var(--seda); margin-left: 6px; white-space: nowrap; }

/* --- vlastní potvrzení místo confirm() -------------------------------- */
/* Nativní confirm vyskočí u adresního řádku, na každém mobilu vypadá jinak
   a s Kufříkem nemá nic společného. Tohle je stejný dialog jako všude jinde,
   jen užší — je to jedna otázka, ne formulář. */
.dialog.potvrzeni { max-width: 440px; border-radius: 22px; margin: auto; }
.dialog.potvrzeni h3 { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; }
.dialog.potvrzeni h3 .ik { flex: 0 0 auto; margin-top: 2px; }
.dialog.potvrzeni p { margin: 0 0 4px; }
.dialog.potvrzeni .akce { margin-top: 16px; }
/* U nebezpečné akce svítí varovně ikona, ne celý dialog — panika nepomáhá. */
.dialog.potvrzeni.nebezpecne h3 .ik { color: #d13c2e; }

/* Přehled nákladů — čísla vpravo pod sebou, ať se dají porovnat očima. */
.kredity { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.castka { font-variant-numeric: tabular-nums; min-width: 68px; text-align: right; white-space: nowrap; }

/* --- lištička po ruce -------------------------------------------------- */
/* Plovoucí vpravo dole, kde lidé chatového pomocníka čekají. Obrázek je
   malovaný (týž, co dělá logo hvězdného motivu) — inkoustová ikona byla
   v téhle velikosti nečitelná a vedle akvarelu působila cize. */
.liska-plovouci {
  position: fixed; right: 14px; z-index: 20;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border: none;
  border-radius: 999px; background: var(--papir); cursor: pointer;
  box-shadow: 0 4px 16px rgba(30, 40, 30, .28);
  font-family: var(--nadpisy); font-size: 15px; color: var(--zelena-tmava);
}
.liska-plovouci:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(30, 40, 30, .34); }
.liska-plovouci:active { transform: translateY(0); }
.liska-obrazek {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: url('/motiv/liska.webp') center/cover;
}
/* V Novém záznamu je dole lišta s tlačítkem Uložit — tam by se překrývaly. */
#app:has(main.pohled-novy) .liska-plovouci { display: none; }
@media (max-width: 420px) {
  /* Na úzkém telefonu jen liška, popisek by tlačítko roztáhl přes půl šířky. */
  .liska-popisek { display: none; }
  .liska-plovouci { padding: 5px; }
}
/* Počet vedle popisku potřebuje vzduch, jinak se čte jako „Zásobník4". */
.sekce-hlava .pocet, .nastenka-hlava .pocet { margin-left: 6px; }
/* Plovoucí lištička sedí nad obsahem — poslední karta v deníku se pod ni
   schovávala i s tlačítkem „Smazat". Stránka proto končí o kus níž, aby se
   dalo doscrollovat pod ni. */
#app:has(.liska-plovouci) main { padding-bottom: 82px; }

/* --- anketa o názvu ---------------------------------------------------- */
/* Blokující dialog: pozadí je hustší než jinde, ať je jasné, že tohle není
   vyskakovací okno k odklepnutí. Zavřít jde jen hlasováním (nebo volbou
   „nevím", která je taky hlas). */
.anketa-pozadi { background: rgba(20, 26, 24, .72); }
.dialog.anketa { max-width: 620px; }
.anketa-seznam { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.anketa-volba {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  background: var(--karta); border: 1.5px solid var(--linka); border-radius: 14px;
  padding: 10px 12px; cursor: pointer; font: inherit; width: 100%;
}
.anketa-volba:hover { border-color: var(--okr); }
.anketa-volba.vybrany { border-color: var(--zelena); background: #f2f8f3; }
.anketa-volba .roste { display: flex; flex-direction: column; gap: 2px; }
.anketa-volba .tlumene { font-size: 13px; line-height: 1.35; }
.anketa-zatrzitko {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  border: 1.5px solid var(--linka); background: var(--papir);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--zelena);
}
.anketa-volba.vybrany .anketa-zatrzitko { border-color: var(--zelena); background: var(--zelena); color: #fff; }
/* Pole na vlastní návrh leží POD tlačítkem, ne v něm — uvnitř tlačítka se
   nedalo zaostřit a klepnutí do něj rovnou odškrtlo volbu. */
.anketa-polozka { display: flex; flex-direction: column; }
.anketa-polozka input[type="text"] {
  margin: 6px 0 0 44px; padding: 10px 12px; border: 1.5px solid var(--zelena);
  border-radius: 10px; font: inherit; box-sizing: border-box;
  width: calc(100% - 44px); background: var(--karta);
}
.anketa-nej { margin-bottom: 12px; }
.anketa-popisek { display: block; font-size: 13px; color: var(--seda); margin: 10px 0 4px; }
/* Poznámka od virtuálního hlasu — odsazená, ať se nesplete s názorem člověka. */
.ai-hlas { border-left: 3px solid var(--linka); padding-left: 10px; font-style: italic; }
/* Roletka „Víc o dnešku" — Denisa chtěla dozvědět se o dnešku víc, ale ne
   za cenu toho, že by ranní přehled zbytněl. */
/* Řádky Dneška: žádné šedé HTML obdélníky — tichý seznam s tečkovanými
   linkami jako stránka deníku. Klepnutelné řádky se poznají až dotykem
   a šipkou, ne rámečkem. */
.dnesek-radky { display: flex; flex-direction: column; }
.dnesek-radek {
  display: flex; align-items: flex-start; gap: 9px; width: 100%;
  background: none; border: none; border-bottom: 1px dotted var(--linka);
  padding: 9px 2px; min-height: 44px; text-align: left;
  font: inherit; font-size: 15px; line-height: 1.4; color: var(--inkoust);
}
.dnesek-radky .dnesek-radek:last-child { border-bottom: none; }
.dnesek-radek .ik { margin-top: 2px; color: var(--seda); flex: 0 0 auto; }
.dnesek-radek span { min-width: 0; }
button.dnesek-radek.klepnutelna { cursor: pointer; border-radius: 10px; }
button.dnesek-radek.klepnutelna::after {
  content: '›'; margin-left: auto; padding-left: 8px;
  color: var(--okr-tmavy); font-size: 18px; line-height: 1;
}
.dnesek-vic { margin-top: 6px; }
.dnesek-vic summary { cursor: pointer; font-size: 13px; color: var(--seda); padding: 8px 0; min-height: 36px; }
.dnesek-vic .dnesek-radky { margin-top: 4px; }
.zdroj-historie { margin-top: 8px; font-style: italic; }