:root{
  /* --- barvy odectene z nove vizualni identity KamPoMaturite.cz --- */
  --ink:#1D2733;            /* nadpisy, bocni panel */
  --ink-2:#5B6875; --ink-3:#8C97A3;
  /* Značka. Do 0.28.5 růžová; sjednoceno se zelenou z úvodní stránky,
     aby stránka a produkt nebyly dvě různé věci. Názvy --pink* jsou
     ponechané schválně — používá je na tři sta míst a přejmenování by
     bylo riziko bez užitku. Význam je „hlavní akce", ne odstín. */
  --znacka:#0E7357; --znacka-d:#0A5641; --znacka-s:#E2F1EC;
  --pink:var(--znacka); --pink-d:var(--znacka-d); --pink-s:var(--znacka-s);
  --lime:#A3C614;  --lime-d:#84A20A; --lime-s:#F0F7DC;   /* cesky jazyk, pokrok */
  /* BARVY PREDMETU. Jedno misto, kde se to rozhoduje — do 0.50.0 si
     kazda obrazovka barvu vybirala sama a Gantt sahnul po --brand
     a --navy, coz nejsou definovane tokeny: kreslil se natvrdo ruzovou
     a temne modrou z fallbacku, ktere se v tmavem rezimu nezmenily.
     Aliasy se rozhodnou az pri pouziti, takze tmavy rezim funguje. */
  --predmet-m:var(--teal);   /* matematika */
  --predmet-cj:var(--lime);  /* cestina */
  --teal:#1FA39C;  --teal-d:#17817C; --teal-s:#E0F4F3;   /* matematika, klid */
  --amber:#C9971A; --amber-s:#FBF0D8;                    /* upozorneni */
  --red:#C0182B;   --red-s:#FBE7EA;                      /* chyby */
  --green:#0F6B49; --green-s:#E4F3EC;                    /* spravne */

  --paper:#F5F7F9; --sheet:#FFFFFF; --grid:#E3E7EC;
  --bod:#D3D8DE;            /* tečková síť na pozadí obsahu */
  --navy-soft:#EDF0F4; --navy-line:#C6CFD9;

  --cut:12px; --cut-lg:18px; --cut-sm:8px;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --paper-pruh:rgba(245,247,249,.94);   /* lišta nad obsahem, průhledná */
  --navw:250px;

  /* RASTR JAKO JEDNOTKA ROZVRŽENÍ (0.63.0).
     Tečkované pozadí obsahu má krok 22 px a tečka sedí uprostřed buňky,
     tedy na 11 + k·22 od levého okraje obsahové plochy. Šířka plochy je
     zaokrouhlená na násobek 22 (1430 = 65 × 22), takže levý i pravý
     okraj jsou vůči rastru symetrické a „sloupec N od konce" je stejně
     daleko jako „sloupec N od začátku".

       sloupec 4 = 11 + 3·22 =  77 px  → OBSAH všech obrazovek i lišta
       sloupec 6 = 11 + 5·22 = 121 px  → čtyři hlavní dlaždice přehledu

     Do 0.63.0 mělo `.mbody` strop 1120 px a odsazení 20/32 px, zatímco
     lišta nad ním šla k okraji okna — obsah a lišta se vzájemně míjely.
     Teď obojí sedí na témž sloupci rastru a je to jedno číslo, ne dvě. */
  --rastr:22px;
  --sl4:77px;
  --sl6:121px;
}

/* --------------------------------------------------------------
   BAREVNÉ VARIANTY A TMAVÝ REŽIM

   Úvodní stránka měla přepínač podoby, aplikace ne — zákazník si tedy
   mohl vyzkoušet jen půlku produktu.

   Šlo to udělat s malým rizikem právě proto, že skoro všechny barvy
   žijí v `:root`. Přepis je tedy jen jiná sada proměnných, ne sáhnutí
   do dvaceti pěti obrazovek. Pár pevných barev mimo `:root` je níž
   ošetřeno výslovně.

   Dvě nezávislé osy:
     data-barva = zelena | modra | zluta
     data-rezim = svetly | tmavy
   -------------------------------------------------------------- */
html[data-barva="modra"]{ --znacka:#1B4FA8; --znacka-d:#123A80; --znacka-s:#E8EEF9; }
/* Žlutá musí být na tlačítku dost tmavá, aby na ní bílý text držel. */
html[data-barva="zluta"]{ --znacka:#8A6300; --znacka-d:#6B4C00; --znacka-s:#FBF0CE; }

html[data-rezim="tmavy"]{
  --ink:#E9EDF2; --ink-2:#9DAAB7; --ink-3:#6E7C8A;
  --paper:#0E141B; --sheet:#161F29; --grid:#243040;
  --bod:#233040; --navy-soft:#1B2530; --navy-line:#2E3B4B;
  /* Značka a stavové barvy musí ve tmě o stupeň zesvětlit, jinak na
     tmavém podkladu zmizí. */
  --znacka:#17A17B; --znacka-d:#128666; --znacka-s:#12281F;
  --lime:#B8D93A; --lime-d:#9CBB1E; --lime-s:#1F2610;
  --teal:#31BDB5; --teal-d:#24A09A; --teal-s:#10262A;
  --amber:#E0B23F; --amber-s:#2A2210;
  --red:#E4576A; --red-s:#2C1418;
  --green:#2FA277; --green-s:#122419;
}
html[data-rezim="tmavy"][data-barva="modra"]{ --znacka:#5A8FE8; --znacka-d:#4478D0; --znacka-s:#15203A; }
html[data-rezim="tmavy"][data-barva="zluta"]{ --znacka:#D9A21B; --znacka-d:#B98613; --znacka-s:#2A2108; }

/* Pevné barvy mimo :root. Bez nich by ve tmě zůstalo pár světlých
   fleků — hlavně tlačítka a lišta dema. */
/* POZOR na specifičnost. `html[data-rezim] .btn` má stejnou váhu jako
   `.btn.brand` a stojí v souboru níž — přebilo tedy VŠECHNY barevné
   varianty tlačítek a ve tmě z nich udělalo šedé placky s tmavým
   textem. Proto výslovné vyloučení. */
html[data-rezim="tmavy"] .btn:not(.brand):not(.teal):not(.lime):not(.ghost):not(.quiet){
  background:var(--navy-line); border-color:var(--navy-line); color:var(--ink) }
html[data-rezim="tmavy"] .btn:not(.brand):not(.teal):not(.lime):not(.ghost):not(.quiet):hover{
  background:#3A4A5C; border-color:#3A4A5C }
/* Na světlé značce ve tmě musí být tmavý text, jinak se nepřečte. */
html[data-rezim="tmavy"] .btn.brand{ background:var(--znacka); border-color:var(--znacka); color:#0B1118 }
html[data-rezim="tmavy"] .btn.brand:hover{ background:var(--znacka-d); border-color:var(--znacka-d) }
html[data-rezim="tmavy"] .btn.teal{ background:var(--teal); border-color:var(--teal); color:#0B1118 }
html[data-rezim="tmavy"] .btn.lime{ background:var(--lime); border-color:var(--lime); color:#0B1118 }
/* Stejny duvod jako u tlacitek vys: na svetlych akcentnich barvach
   (zvlast zlute) je bily text necitelny. */
html[data-rezim="tmavy"] .mark,
html[data-rezim="tmavy"] .navfoot .av{ color:#0B1118 }
/* Volby odpovědí: ve tmě jsou podbarvení tmavá, text tedy zůstává světlý. */
html[data-rezim="tmavy"] .opt,
html[data-rezim="tmavy"] .opt.sel,
html[data-rezim="tmavy"] .opt.ok,
html[data-rezim="tmavy"] .opt.no{ color:var(--ink) }
html[data-rezim="tmavy"] .dot{ background:#4C5B6B }
html[data-rezim="tmavy"] .demobar{ color:#E0B23F }
html[data-rezim="tmavy"]{ --paper-pruh:rgba(14,20,27,.94) }
html[data-rezim="tmavy"] .src{ color:#3E7C77 }
html[data-rezim="tmavy"] .nav.open{ box-shadow:0 0 60px rgba(0,0,0,.6) }

/* ===============================================================
   PŘEPÍNAČ PODOBY — pro posouzení návrhu zákazníkem.
   Než produkt půjde ven, smazat: tenhle blok, prvek .prepinac
   a jeho skript. Návštěvník má dostat jednu podobu, ne volbu.
   =============================================================== */
.prepinac{
  position:fixed;right:16px;bottom:16px;z-index:120;display:flex;align-items:center;gap:9px;
  background:var(--sheet);border:1px solid var(--navy-line);
  border-radius:999px;padding:6px 8px;box-shadow:0 10px 30px -12px rgba(6,10,16,.55)}
/* SKRYTÝ, DOKUD HO NĚKDO NEPOŽÁDÁ (0.79.0). Na desktopu překrýval
   tlačítka vpravo dole (hlášeno 25. 9. 2026) a testeři ho brali jako
   součást produktu. Ukáže se jen s ?podoba v adrese, např.
   https://…/?podoba#/prehled — pro posouzení barev se zadavatelem. */
.prepinac[hidden]{display:none}
.prepinac .barvy{display:flex;gap:5px}
.prepinac .barvy button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;font-size:0}
.prepinac .barvy button[data-volba="zelena"]{background:#0E7357}
.prepinac .barvy button[data-volba="modra"]{background:#1B4FA8}
.prepinac .barvy button[data-volba="zluta"]{background:#C08A00}
.prepinac .barvy button[aria-pressed="true"]{border-color:var(--ink)}
.prepinac .del{width:1px;height:20px;background:var(--navy-line)}
.prepinac .rezim{border:none;background:transparent;font:inherit;font-size:12.5px;
  font-weight:600;padding:4px 10px;border-radius:999px;cursor:pointer;color:var(--ink)}
.prepinac .rezim:hover{background:var(--navy-soft)}
/* NA MOBILU SBALENÝ (0.78.0). Rozbalený přepínač zakrýval na telefonu
   spodní část obrazovky — tlačítko Odeslat v rozhovoru i poslední řádek
   úlohy. Na úzké obrazovce je z něj jedno kolečko vlevo dole, rozbalí
   se klepnutím. */
.prepinac .otevrit{display:none;width:30px;height:30px;border-radius:50%;border:none;padding:0;
  cursor:pointer;background:conic-gradient(#0E7357 0 33%,#1B4FA8 0 66%,#C08A00 0);font-size:0}
@media (max-width:640px){
  .prepinac{left:8px;right:auto;bottom:8px;padding:4px;opacity:.9}
  .prepinac .otevrit{display:inline-block}
  .prepinac:not(.otevreny) .barvy,.prepinac:not(.otevreny) .del,.prepinac:not(.otevreny) .rezim{display:none}
  /* Místo pod posledním řádkem, aby ho kolečko nezakrylo. */
  html.s-prepinacem main#view{padding-bottom:56px}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0}
h1{font-size:clamp(2rem,6vw,3.5rem)}
h2{font-size:clamp(1.4rem,3.4vw,2.1rem)}
h3{font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
p{margin:0}
a{color:var(--pink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sheet{background:var(--sheet);border:1px solid var(--grid);border-radius:var(--cut-lg) 0 var(--cut-lg) 0}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.lede{font-size:1.05rem;color:var(--ink-2);max-width:52ch}
.muted{color:var(--ink-2)} .small{font-size:13px} .tiny{font-size:12px}
.sp{margin-left:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- tlacitka: dva protilehle rohy zaoblene ---------- */
/* HLAVNÍ TLAČÍTKO JE ZNAČKOVÉ, NE ČERNÉ (0.65.0).
   Do 0.64.1 mělo základní `.btn` barvu `--ink`, tedy skoro černou, a
   značkovou zelenou dostalo jen tam, kde někdo připsal `.brand`.
   Výsledek: na výběru učitele i v přijímačkách nanečisto stálo černé
   tlačítko vedle zelených a vypadalo jako cizí prvek. Barva hlavní
   akce je vlastnost návrhu, ne věc, na kterou se má u každého tlačítka
   pamatovat — proto ji nese základ a `.brand` je jen synonymum.
   Kdo chce tmavé tlačítko schválně, napíše `.btn.ink`. */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:15px;
  padding:11px 18px;border-radius:var(--cut) 0 var(--cut) 0;border:1px solid var(--pink);
  background:var(--pink);color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{background:var(--pink-d);border-color:var(--pink-d);text-decoration:none}
.btn.ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ink:hover{background:#0F1720;border-color:#0F1720}
/* Text na značkovém tlačítku musí být bílý.
   Třída `.brand` má v tomhle dokumentu DVA významy — logo v hlavičce
   a hlavní akci na tlačítku. Pravidlo pro logo (`.brand{color:var(--ink)}`)
   stojí v souboru níž a při stejné specifičnosti přebilo `.btn{color:#fff}`,
   takže „Přihlásit se" mělo tmavý text a navíc zdědilo displejové písmo
   o velikosti 19 px. Tady se to nastavuje výslovně. */
.btn.brand{background:var(--pink);border-color:var(--pink);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:normal}
.btn.brand:hover{background:var(--pink-d);border-color:var(--pink-d)}
.btn.lime{background:var(--lime-d);border-color:var(--lime-d)}
.btn.teal{background:var(--teal);border-color:var(--teal)}
.btn.teal:hover{background:var(--teal-d);border-color:var(--teal-d)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--navy-line)}
.btn.ghost:hover{background:var(--navy-soft)}
/* Vedlejší tlačítko má vlastní plochu a čitelný okraj (0.79.0). Průhledné
   s okrajem v barvě mřížky vypadalo na podkladu stránky jako vypnuté
   (hlášeno 25. 9. 2026 u „Zpět" a „Přeskočit rozhovor" v seznámení). */
.btn.quiet{background:var(--sheet);color:var(--ink);border-color:var(--navy-line)}
.btn.quiet:hover{background:var(--navy-soft);border-color:var(--ink-3)}
.btn.sm{padding:7px 13px;font-size:13.5px;border-radius:var(--cut-sm) 0 var(--cut-sm) 0}
.btn.block{width:100%;justify-content:center}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;
  border-radius:var(--cut-sm) 0 var(--cut-sm) 0;background:var(--navy-soft);color:var(--ink)}
.pill.pink{background:var(--pink-s);color:var(--pink-d)}
.pill.lime{background:var(--lime-s);color:var(--lime-d)}
.pill.teal{background:var(--teal-s);color:var(--teal-d)}
.pill.red{background:var(--red-s);color:var(--red)}
.pill.green{background:var(--green-s);color:var(--green)}
.pill.amber{background:var(--amber-s);color:var(--amber)}
.pill.plain{background:var(--paper);color:var(--ink-2)}
/* KLIKACI STITEK. Tam, kde se vedle sebe strida stav a akce (karta
   ditete), by plne tlacitko radek vytahlo o 10 px vys nez stitek.
   Akce ma proto stejny tvar jako stav a lisi se jen chovanim.
   `font-family:inherit` a `border:0` jsou kvuli <button>, ktery si
   jinak vezme systemove pismo a ramecek prohlizece. */
.pill.klik{cursor:pointer;text-decoration:none;font-family:inherit;border:0}
.pill.klik:hover{text-decoration:none;filter:brightness(.96)}
.pill.plain.klik{border:1px solid var(--grid);color:var(--ink)}


/* ---------- veřejná úvodní stránka ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sec{padding:56px 0;border-top:1px solid var(--grid)}
.sec-head{max-width:56ch;margin-bottom:28px}
.sec-head h2{margin:10px 0 12px}
.band{background:var(--ink);color:var(--paper);padding:52px 0}
.band h2{color:var(--paper);margin:10px 0 14px}
.band p{color:#B9C4D6;max-width:50ch;font-size:1.02rem}
.band .eyebrow{color:#7C8894}


/* ---------- živý chat ---------- */
.chatbox{display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--grid);
  border-radius:var(--cut-lg) 0 var(--cut-lg) 0;overflow:hidden}
.chatlog{padding:18px;min-height:220px;max-height:52vh;overflow-y:auto}
.m{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start}
.m.me{flex-direction:row-reverse}
.m .av{width:32px;height:32px;flex:0 0 32px}
.m .av svg{width:32px;height:32px;display:block}
.m .txt{border-radius:var(--cut) 0 var(--cut) 0;padding:11px 14px;font-size:15px;
  max-width:min(52ch,82%);white-space:pre-wrap;word-break:break-word}
/* POZOR NA NATVRDO ZADANOU BILOU. Pozadi je --ink, ktere se v tmavem
   rezimu PREKLAPI na svetlou (#1D2733 -> #E9EDF2). Text #fff pak zustal
   bily a bublina zaka byla bila na bile — vlastni zprava se nedala
   precist vubec. --paper se preklapi spolu s --ink v opacnem smyslu,
   takze kontrast drzi v obou rezimech sam od sebe. */
.m.me .txt{background:var(--ink);color:var(--paper)}
.m.ai .txt{background:var(--paper);border:1px solid var(--grid)}
/* BEZPEČNOSTNÍ VSTUP. Pravidlo je ZÁMĚRNĚ až za `.m.me .txt`, aby
   přebilo i bublinu dítěte — krizový tah se má poznat na první pohled
   u obou stran rozhovoru, ne jen u odpovědi.
   Platí i po znovunačtení stránky: `krize` se dnes ukládá do zprávy
   a vrací se v historii (do 0.58.0 se tenhle tah neukládal vůbec
   a z vlákna po obnovení zmizel). */
.m.krize .txt{background:var(--red-s);color:var(--ink);border-left:3px solid var(--red);
  border-radius:0 var(--cut) var(--cut) 0;max-width:min(58ch,94%)}
/* Zástupná věta místo neuloženého textu dítěte. Není to, co dítě
   napsalo — a nesmí tak vypadat. */
.m.me.krize .txt{font-style:italic;opacity:.85}
/* ---------- výklad látky: pruh s rejstříkem + chat (0.65.0) ----------
   Dvousloupcové rozvržení. Na úzkém okně se pruh složí NAD chat, ne
   pod něj — jinak by ho dítě na telefonu nikdy nenašlo. */
.vyklad-plocha{display:grid;gap:18px;align-items:start}
@media (min-width:1080px){.vyklad-plocha{grid-template-columns:266px minmax(0,1fr)}}
.vyklad-bok{background:var(--sheet);border:1px solid var(--grid);
  border-radius:var(--cut-lg) 0 var(--cut-lg) 0;padding:14px}
@media (min-width:1080px){.vyklad-bok{position:sticky;top:72px;max-height:calc(100vh - 92px);
  overflow-y:auto}}
.bok-nadpis{font-family:var(--disp);font-weight:600;font-size:14px;margin:14px 0 8px}
.bok-seznam{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.bok-radek{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  padding:8px 10px}
.bok-radek:hover{background:var(--paper);border-color:var(--grid)}
.bok-radek.on{background:var(--znacka-s);border-color:var(--znacka);cursor:default}
.bok-radek .nazev{display:block;font-size:13.5px;font-weight:600;line-height:1.3;
  margin-bottom:2px;overflow-wrap:anywhere}
.bok-pata{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--grid)}
/* Karta učitele nad chatem. Stejný obrázek i stejná věta jako
   v uvítání na přehledu — dítě má poznat, s kým mluví, a ne řešit,
   jestli je to někdo jiný. */
.vyklad-ucitel{display:flex;align-items:center;gap:13px;padding:11px 16px;margin-bottom:12px}
.vyklad-ucitel img{width:46px;height:46px;flex:0 0 46px;border-radius:50%;object-fit:cover;
  object-position:center top;border:1px solid var(--grid)}
.vyklad-ucitel-jmeno{font-weight:700;font-size:14.5px}
/* Chat dostal plochu, kvůli které se to celé přestavovalo. */
.vyklad-chat .chatlog{min-height:44vh;max-height:60vh}
.chat-namety{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:0 16px 12px;border-top:1px solid var(--grid);padding-top:12px}
.chatform{display:flex;gap:8px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--grid);background:var(--sheet)}
.chatform textarea{flex:1;resize:none;max-height:130px;padding:10px 12px;border:1px solid var(--grid);
  border-radius:var(--cut) 0 var(--cut) 0;background:var(--sheet);font:inherit;font-size:15px;color:var(--ink)}
.tri span{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;background:var(--ink-3);animation:tri 1.2s infinite}
.tri span:nth-child(2){animation-delay:.15s}.tri span:nth-child(3){animation-delay:.3s}
@keyframes tri{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.tri span{animation:none;opacity:.6}}
/* ---------- klíče a body (0.76.0) ----------
   Barva kovu je pevná i ve tmavém režimu (kov je kov); nese jen
   doplňkovou informaci — název klíče je vždycky i v textu a v aria-label. */
.klic-ic{display:inline-block;vertical-align:-4px;flex:0 0 auto}
.klic-karta{display:flex;gap:14px;align-items:center;margin-top:12px;padding:13px 16px;
  background:var(--sheet);border:1px solid var(--grid);border-left:3px solid var(--amber);
  border-radius:0 var(--cut) var(--cut) 0}
.klic-karta b{display:block;margin-bottom:3px}
.klic-karta.rez{border-left-color:var(--ink-3);background:var(--paper)}
.klic-pocty{display:inline-flex;gap:14px;align-items:center}
.klic-pocet{display:inline-flex;gap:5px;align-items:center;font-weight:600;font-size:14px}
/* Cesta ke klíči v Pokroku (0.81.0): věta pod tématem a akce vpravo. */
.klic-radek{padding:9px 0;border-top:1px solid var(--grid)}
.klic-radek:first-of-type{border-top:none}
.klic-radek .row{border-bottom:none}
.klic-cesta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0 0 30px;color:var(--ink-2);font-size:13px;line-height:1.45}
.klic-cesta .sp{flex:1}
.klic-cesta .btn{flex:none}
@media(max-width:560px){.klic-cesta{margin-left:0}}
.body-radek{font-weight:600;color:var(--ink-2)}
/* Jak to funguje (0.79.0) */
.nap-karty{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.nap-karta{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--sheet);
  border:1px solid var(--grid);border-radius:0 var(--cut) 0 var(--cut)}
.nap-karta b{display:block;font-size:1.02rem;margin-bottom:4px}
.nap-karta p{margin:0;line-height:1.5}
.nap-ik{flex:0 0 34px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.nap-karta .nap-ik.ikona{width:34px;height:34px;flex:0 0 34px;opacity:1}
.nap-karta .nap-ik.ikona svg{width:26px;height:26px}
.nap-ik.hvezda{font-size:26px;color:var(--amber)}
.nap-ik.kredit{font-size:24px;color:var(--znacka)}
.nap-otazky{display:grid;gap:8px}
/* Úvod seznámení jako karusel (0.79.2): jedna karta, velké písmo.
   0.80 (D. Seifert 27. 9.): karta přes šířku stránky, ještě větší písmo. */
.uvod-karusel{max-width:1080px;margin:0 auto;padding-top:8px}
.uvod-pozdrav{margin-bottom:8px;font-size:2.6rem}
.uvod-lede{margin-bottom:22px;font-size:1.25rem}
.uvod-karta{background:var(--sheet);border:1px solid var(--grid);border-radius:0 var(--cut) 0 var(--cut);
  padding:60px 72px 56px;text-align:center;min-height:460px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;box-shadow:0 10px 30px -18px rgba(14,22,33,.35)}
.uvod-karta h3{font-size:2.5rem;margin:6px 0 0}
.uvod-karta p{font-size:1.65rem;line-height:1.55;margin:0;max-width:32em;color:var(--ink)}
.nap-ik.velka{flex:0 0 auto;width:64px;height:64px}
.nap-ik.velka.hvezda{font-size:56px}
.nap-ik.velka.kredit{font-size:50px}
.nap-karta .nap-ik.ikona.velka, .uvod-karta .nap-ik.ikona.velka{width:64px;height:64px;flex:0 0 64px;opacity:1}
.uvod-karta .nap-ik.ikona.velka svg{width:56px;height:56px}
.uvod-karta .nap-ik.velka{transform:scale(1.5);margin:14px 0 10px}
.uvod-tecky{display:flex;gap:8px;justify-content:center;margin:18px 0 4px}
.uvod-tecky i{width:10px;height:10px;border-radius:50%;background:var(--grid)}
.uvod-tecky i.hotovo{background:var(--navy-line)}
.uvod-tecky i.on{background:var(--znacka);transform:scale(1.25)}
.uvod-pocet{text-align:center}
.uvod-tlacitka{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.uvod-tlacitka .btn{min-width:200px;justify-content:center;font-size:1.25rem;padding:16px 30px}
@media (max-width:1100px){ .uvod-karta{padding:44px 40px;min-height:400px} .uvod-karta h3{font-size:2.1rem}
  .uvod-karta p{font-size:1.4rem} }
@media (max-width:560px){ .uvod-pozdrav{font-size:1.9rem} .uvod-karta{padding:26px 18px;min-height:260px}
  .uvod-karta h3{font-size:1.5rem} .uvod-karta p{font-size:1.15rem}
  .uvod-karta .nap-ik.velka{transform:none;margin:0} .uvod-tlacitka .btn{min-width:0;flex:1} }
/* Oznámení rodiči (0.79.3). */
.nav-odznak{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--pink);color:#fff;font-size:11.5px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center}
.burger{position:relative}
.pas-misto{display:contents}
.burger-tecka{position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 0 2px var(--sheet)}
.mtop-oznameni{font:inherit;font-size:12.5px;cursor:pointer;margin-left:auto;background:var(--pink);
  color:#fff;border:0;border-radius:999px;padding:6px 13px;display:inline-flex;gap:7px;align-items:center;
  white-space:nowrap;font-weight:600}
.mtop-oznameni:hover{filter:brightness(1.07)}
.mtop-oznameni .tecka{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9}
@media (max-width:560px){ .mtop-oznameni{font-size:12px;padding:5px 10px;white-space:normal;text-align:left} }
/* Zamčené menu během seznámení (0.79.2). */
.nav-zamek{display:flex;gap:8px;align-items:flex-start;margin:0 4px 6px;padding:10px 12px;
  background:var(--amber-s);border:1px solid var(--amber);border-radius:6px;font-size:12.5px;line-height:1.4;color:var(--ink)}
.nav-zamek .zamek-ic{flex:0 0 14px;margin-top:2px}
.nav .it.zamceno{display:flex;align-items:center;gap:10px;padding:9px 10px;font-size:14.5px;font-weight:500;
  color:var(--ink-3);cursor:not-allowed;opacity:.55}
.nav .it.zamceno .zamek-ic{margin-left:auto}
.nap-otazka{background:var(--sheet);border:1px solid var(--grid);border-radius:6px;padding:12px 16px}
.nap-otazka summary{cursor:pointer;font-weight:600}
.nap-otazka p{margin:8px 0 0}
/* Postup ke klíči v kole (0.79.0): osm políček, práh a napůl odkrytý
   klíč. Dítě má vidět, jak blízko je — ne jen číslo ve větě. */
.ke-klici{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ke-klici .sloty{display:inline-flex;gap:4px;align-items:center}
.ke-klici .slot{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--grid);
  background:var(--sheet);position:relative}
.ke-klici .slot.samo{background:var(--teal);border-color:var(--teal-d, var(--teal))}
.ke-klici .slot.pomoc{background:var(--grid);border-color:var(--ink-3)}
.ke-klici .slot.prah::after{content:"";position:absolute;right:-4px;top:-5px;bottom:-5px;
  width:2px;background:var(--amber);border-radius:1px}
.klic-odkryv{position:relative;display:inline-block;width:36px;height:36px;flex:0 0 auto}
.ke-klici + br{display:none}
.klic-odkryv .zaklad{position:absolute;inset:0;filter:grayscale(1);opacity:.28}
.klic-odkryv .barva{position:absolute;inset:0;clip-path:inset(0 calc((1 - var(--podil)) * 100%) 0 0)}
.ke-klici .veta{font-size:13.5px;color:var(--ink-2);font-weight:600}
/* ---------- vstupní zařazení (0.76.0) ---------- */
.zar-hlava{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.zar-tecky{display:inline-flex;gap:5px}
.zar-tecky i{width:9px;height:9px;border-radius:50%;background:var(--grid);display:block}
.zar-tecky i.on{background:var(--ink-3)}
.zar-tecky i.ted{background:transparent;box-shadow:inset 0 0 0 2px var(--ink-3)}
.stav{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  padding:4px 9px;border-radius:var(--cut-sm) 0 var(--cut-sm) 0;border:1px dashed var(--navy-line);color:var(--ink-2)}
.stav.live{border-style:solid;border-color:var(--lime);background:var(--lime-s);color:var(--lime-d)}


/* ---------- procvičování ---------- */
.uloha-obr{display:block;max-width:100%;margin:14px 0;border:1px solid var(--grid);
  border-radius:var(--cut) 0 var(--cut) 0;background:#fff}
.stimul{background:var(--paper);border-left:3px solid var(--teal);border-radius:0 var(--cut) var(--cut) 0;
  padding:13px 15px;font-size:14.5px;white-space:pre-wrap;margin-bottom:16px}
.zadani{font-size:1.06rem;line-height:1.6;white-space:pre-wrap;margin-bottom:16px}
/* Místo ve výchozím textu, na které se zadání odkazuje (0.81.1). Podtržení
   nese význam i bez barvy; podklad je jen pro rychlé nalezení. */
mark.zvyr{background:var(--amber-s);color:inherit;box-shadow:inset 0 -2px 0 var(--amber);
  padding:0 2px;border-radius:2px}
.opt.disabled{cursor:default;opacity:.85}
.vysl{border-radius:var(--cut) 0 var(--cut) 0;padding:13px 15px;font-size:14.5px;margin-top:14px}
.vysl.ok{background:var(--green-s);border-left:4px solid var(--green);border-radius:0 var(--cut) var(--cut) 0}
/* VÝSLEDEK BEZ RŮŽOVÉ (P1 0.80.1, D. Seifert 28. 9. 2026: „nelíbí se mi,
   jak podbarvuje ten klíč růžovou a je tam takový drobný text — to může
   dítě mást"). Chyba už nesedí na červeném poli: rámeček je klidný
   a hlavní sdělení je správná odpověď ve velkém zeleném štítku — stejná
   zelená jako správná volba nad ním. Drobný text zůstal jen pro čas
   a pro to, proč se úloha nepočítá do kola (.vysl-meta). */
.vysl.no{background:var(--sheet);border:1px solid var(--navy-line);border-left:4px solid var(--amber);
  border-radius:0 var(--cut) var(--cut) 0}
.vysl-hl{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.3;display:flex;align-items:center;gap:12px}
/* TŘI STAVY VÝSLEDKU (0.80.1, D. Seifert 28. 9. 2026): „neúspěch, úspěch,
   s pomocí se rozliší". Správně = zelená, pochvala a krátký efekt;
   dořešeno s pomocí = tyrkysová a úsměv; ještě ne = klidný rámeček
   a smutnější obličej. Obličeje kreslí kód jako SVG (barvy z motivu),
   ne emoji — ty vypadají v každém systému jinak. */
.vysl.ok .vysl-hl,.vysl.pomoc .vysl-hl{font-size:19px}
.vysl.pomoc{background:var(--teal-s);border-left:4px solid var(--teal);border-radius:0 var(--cut) var(--cut) 0}
.vysl-ikona{position:relative;flex:0 0 40px;width:40px;height:40px}
.vysl-ikona svg{width:40px;height:40px;display:block}
.vysl-ikona i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;opacity:0;background:var(--amber);pointer-events:none;z-index:1}
.vysl-ikona i:nth-child(even){background:var(--green);width:5px;height:5px;margin:-2.5px 0 0 -2.5px}
/* Efekt jen při prvním zobrazení výsledku. Překreslení obrazovky ho
   nespustí znovu: --uplynulo posune animaci o už uplynulý čas. */
.vysl.anim .vysl-ikona svg{animation:vysl-pop .65s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--uplynulo,0ms)}
.vysl.anim .vysl-ikona i{animation:vysl-jiskra .9s ease-out both;animation-delay:var(--uplynulo,0ms)}
@keyframes vysl-pop{0%{transform:scale(.3) rotate(-25deg);opacity:0}60%{transform:scale(1.2) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes vysl-jiskra{0%{opacity:0;transform:rotate(var(--a)) translateY(-12px) scale(.4)}
  15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-36px) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.vysl.anim .vysl-ikona svg,.vysl.anim .vysl-ikona i{animation:none}}
.vysl-klic{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px}
.vysl-stitek{font-size:14.5px;color:var(--ink-2)}
.vysl-hodnota{display:inline-block;max-width:100%;font-size:18px;font-weight:700;line-height:1.35;
  color:var(--ink);background:var(--green-s);border:1px solid var(--green);
  border-radius:var(--cut-sm) 0 var(--cut-sm) 0;padding:5px 12px;overflow-wrap:anywhere}
.vysl-proc,.vysl-txt{font-size:15px;line-height:1.55;margin:10px 0 0}
.vysl-meta{font-size:12.5px;color:var(--ink-2);margin-top:12px;padding-top:9px;border-top:1px dashed var(--navy-line)}
.vysl .body-radek{display:block;margin-top:10px;font-size:13.5px}
.vysl .ke-klici{margin-top:12px}
.o-uloze{margin-top:6px}
.o-uloze > summary{cursor:pointer;width:max-content;text-decoration:underline dotted;text-underline-offset:3px}
.vyklad-box{background:var(--sheet);border:1px solid var(--grid);border-radius:var(--cut-lg) 0 var(--cut-lg) 0;
  padding:16px;margin-top:14px;display:flex;gap:11px;align-items:flex-start}
.vyklad-box .av{width:36px;flex:0 0 36px}
.vyklad-box .t{font-size:14.8px;white-space:pre-wrap;line-height:1.65}

/* ---------- demo pruh ---------- */
.demobar{background:var(--amber-s);border-bottom:1px solid var(--grid);color:#8A6A12;font-size:12.5px;text-align:center;padding:6px 14px}
.demobar b{font-weight:600}

/* ---------- verejna hlavicka ---------- */
.top{background:var(--sheet);border-bottom:1px solid var(--grid)}
.top .wrap{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:0;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.brand:hover{text-decoration:none}
/* Avatar v seznamech — čtvereček s iniciálou. Zůstává beze změny. */
.mark{width:26px;height:26px;border-radius:var(--cut-sm) 0 var(--cut-sm) 0;background:var(--pink);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:500}
/* SLOVNÍ ZNAČKA. Do 0.74.1 se „Amos" psalo do téhož čtverečku jako
   avatar — jenže ten má pevných 26 px a čtyři písmena se do něj
   nevešla, takže se ořezávala. Navíc tím název vypadal jako dvě
   slova. Teď je to jedno slovo a „Amos" odlišuje jen barva.
   Volba D. Seiferta, 23. 9. 2026 (varianta C ze čtyř předložených). */
.znacka-amos{color:var(--znacka);font:inherit;font-style:normal}
html[data-rezim="tmavy"] .znacka-amos{color:var(--znacka)}
.top nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.navtoggle{display:none;font:inherit;font-size:18px;line-height:1;padding:7px 11px;cursor:pointer;margin-left:auto;
  background:var(--sheet);border:1px solid var(--grid);border-radius:var(--cut-sm) 0 var(--cut-sm) 0;color:var(--ink)}
@media (max-width:719px){
  .top .wrap{flex-wrap:wrap;height:auto;padding-top:11px;padding-bottom:11px}
  .navtoggle{display:inline-block}
  .top nav{display:none;width:100%;margin-left:0;flex-direction:column;align-items:stretch;gap:2px;padding-top:10px}
  .top nav.open{display:flex}
  .top nav a{padding:10px 12px}
}
.top nav a{font-size:14px;font-weight:500;color:var(--ink-2);padding:7px 10px;border-radius:var(--cut-sm) 0 var(--cut-sm) 0}
.top nav a:hover{background:var(--paper);text-decoration:none;color:var(--ink)}
.top nav a.on{color:var(--pink-d);background:var(--pink-s)}

/* ---------- aplikacni skorapka ---------- */
.shell{display:block;min-height:100vh}
/* Boční panel není samostatná tmavá plocha, ale součást papíru —
   oddělený jen linkou. Tmavý pruh přes celou výšku bral pozornost
   pořád, i když se v něm nic nedělo. */
.nav{position:fixed;top:0;bottom:0;left:0;width:var(--navw);background:var(--paper);color:var(--ink);z-index:70;
  border-right:1px solid var(--grid);padding:18px 14px 20px;
  transform:translateX(-100%);transition:transform .22s ease;display:flex;flex-direction:column;isolation:isolate;
  /* PANELEM SE NESMÍ HÝBAT DO STRAN. Nahlášeno 15. 9. 2026: panel šel
     táhnout, přestože v něm nebylo co rolovat a žádná lišta se
     nekreslila. Naměřeno: scrollWidth 339 px proti šířce 249 px
     a scrollHeight 1120 px proti 1000 px — přitom menu samo měří
     707 px. Celý ten rozdíl dělaly OZDOBNÉ KRUHY níž: `left:-70px`
     a `right:-90px` u nich rozšiřovaly rolovatelnou plochu panelu,
     i když se samy nekreslily. Ozdoba proto dostala vlastní vrstvu
     s `overflow:hidden` (`.nav-zar`) a vodorovná osa se zavírá
     natvrdo.

     Svislé rolování zůstává — na nízkém okně (pod ~710 px) se menu
     nevejde a bez něj by poslední položky nešly kliknout. */
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{width:0;height:0;display:none}
/* Měkký nádech pod panelem. Je tam jen proto, aby plocha nebyla
   plochá — jakmile by ho šlo pojmenovat, je moc silný.
   Vlastní vrstva, ne `::before`/`::after` na panelu: kruhy přesahují
   ven a na panelu by zvětšovaly rolovatelnou plochu (viz výš). */
.nav-zar{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.nav-zar::before{
  content:"";position:absolute;left:-70px;bottom:-120px;
  width:340px;height:340px;border-radius:50%;
  background:var(--teal);opacity:.09;filter:blur(90px)}
.nav-zar::after{
  content:"";position:absolute;right:-90px;top:-90px;
  width:280px;height:280px;border-radius:50%;
  background:var(--pink);opacity:.07;filter:blur(80px)}
/* --------------------------------------------------------------
   VEŘEJNÉ OBRAZOVKY — přihlášení, registrace, hesla

   Dřív tu byl obrázek Komenského vsazený do stránky jako base64.
   Vážil skoro sto kilobajtů, na mobilu zabral celou první obrazovku
   a s tečkovaným rastrem úvodní stránky si nerozuměl.

   Teď je to prázdná plocha s rastrem, karta na střed a citát pod ní.
   Citát zůstal — je to jediná věc na té obrazovce, která říká, proč
   produkt existuje.
   -------------------------------------------------------------- */
.stred{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px;position:relative;isolation:isolate;
  background-color:var(--paper);
  background-image:radial-gradient(circle at 1px 1px,var(--bod) 1px,transparent 0);
  background-size:16px 16px;background-position:8px 8px;
}
/* Měkký nádech pod rastrem. Stejný princip jako v bočním panelu:
   jakmile by se dal pojmenovat, je moc silný. */
.stred::before{
  content:"";position:absolute;z-index:-1;left:50%;top:-140px;
  width:520px;height:420px;margin-left:-260px;border-radius:50%;
  background:var(--pink);opacity:.1;filter:blur(100px);pointer-events:none}
.stred::after{
  content:"";position:absolute;z-index:-1;right:-120px;bottom:-120px;
  width:420px;height:360px;border-radius:50%;
  background:var(--teal);opacity:.08;filter:blur(90px);pointer-events:none}
.stred .karta{
  width:100%;max-width:420px;background:var(--sheet);
  border:1px solid var(--grid);border-radius:var(--cut-lg) 0 var(--cut-lg) 0;
  padding:32px 30px;box-shadow:0 1px 2px rgba(29,39,51,.04),
    0 24px 56px -32px rgba(29,39,51,.45)}
/* SLOVNÍ ZNAČKA MÁ VŠUDE STEJNÝ TVAR (24. 9. 2026).
   Tahle měla `gap:11px` a `letter-spacing:.13em`, takže se z jednoho
   slova stalo „Amos  P r i j i m a c k y . c z“ — přesně to, co
   varianta C ruší. Rozměry se řídí hlavičkou aplikace (.brand):
   19 px, váha 800, proložení −.03em, žádná mezera. */
.stred .znak{
  display:flex;align-items:center;gap:0;margin-bottom:26px;
  font-family:var(--disp);font-weight:800;letter-spacing:-.03em;font-size:19px}
.stred .citat{
  max-width:520px;margin:34px auto 0;text-align:center;
  color:var(--ink-2);font-size:14.5px;line-height:1.6}
.stred .citat b{display:block;font-weight:400;font-style:italic;margin-bottom:8px}
.stred .citat span{font-size:12.5px;color:var(--ink-3)}
@media (max-width:520px){
  .stred{padding:28px 16px}
  .stred .karta{padding:26px 22px}
}

/* --------------------------------------------------------------
   ROZCESTNÍK — pokrok v plánu a rozpad kreditů

   Dvě věci, které dítě nemělo kde vidět: kde je v plánu (co bylo
   minule, co je dneska) a za co mu vlastně kredity odcházejí.

   Harmonogram je vodorovná osa dvou předmětů. Není to graf pro
   grafu — je z něj vidět, že zkouška je ze dvou předmětů a že se
   kroky střídají.
   -------------------------------------------------------------- */
/* Prostý blok s řádky, ne mřížka.
   Dřív byla `.osa` dvousloupcová mřížka, ale `.osa-pruh` měl
   `display:flex` — každý pruh tedy sedl do PRVNÍHO sloupce a oba
   předměty se překryly přes sebe. */
.osa{display:block}
.osa-hlava{font-size:10px;font-family:var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding:0 0 6px 106px}
.osa-pruh{display:flex;gap:4px;min-height:38px;align-items:center;
  border-top:1px solid var(--grid)}
.osa-pruh:first-of-type{border-top:none}
.osa-nazev{font-size:12.5px;font-weight:600;display:flex;align-items:center;
  gap:7px;flex:0 0 100px;padding-right:6px}
.osa-nazev i{width:9px;height:9px;border-radius:2px 0 2px 0;display:block}
.osa-blok{
  flex:1 1 0;min-width:0;padding:7px 9px;border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;background:var(--navy-soft);color:var(--ink-2)}
.osa-blok.ted{box-shadow:inset 0 0 0 1.5px currentColor}
.osa-blok.hotovo{opacity:.5;text-decoration:line-through}
.osa-pruh.m .osa-nazev i{background:var(--pink)}
.osa-pruh.m .osa-blok.ted{background:var(--pink-s);color:var(--pink-d)}
.osa-pruh.cj .osa-nazev i{background:var(--teal)}
.osa-pruh.cj .osa-blok.ted{background:var(--teal-s);color:var(--teal-d)}

.rozpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){.rozpad{grid-template-columns:1fr}
  .osa{grid-template-columns:1fr}.osa-hlava{display:none}}
.rozpad div{background:var(--navy-soft);border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  padding:12px 14px}
.rozpad .n{font-family:var(--disp);font-weight:800;font-size:1.3rem;line-height:1}
.rozpad .l{font-size:11.5px;color:var(--ink-2);margin-top:5px}

.nav.open{transform:none}
/* Na mobilu panel leze přes obsah. Když má stejnou barvu jako
   stránka, samotná linka nestačí — potřebuje stín, aby bylo vidět,
   že něco leží nad něčím. */
@media (max-width:999px){
  .nav.open{box-shadow:0 0 60px rgba(29,39,51,.28)}
}
.nav .brand{color:var(--ink);margin-bottom:20px;padding:0 6px}
.nav .grp{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:16px 8px 7px}
.nav a.it{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--cut-sm) 0 var(--cut-sm) 0;
  font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none}
.nav a.it:hover{background:var(--navy-soft);color:var(--ink);text-decoration:none}
.nav a.it.on{background:var(--sheet);color:var(--ink);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--grid),0 1px 2px rgba(29,39,51,.05)}
.dot{width:9px;height:9px;flex:0 0 9px;border-radius:2px 0 2px 0;background:#AEB8C3}
.nav a.it.on .dot,.nav a.it:hover .dot{transform:scale(1.15)}
/* Ikona v menu. Barvu dědí přes `currentColor` z téže třídy, jakou
   měl čtvereček — proto `color`, ne `background`. Neaktivní položka
   je tlumená, aby menu nebylo cirkus; po najetí a u vybrané položky
   jde barva naplno. */
.ikona{width:18px;height:18px;flex:0 0 18px;display:flex;align-items:center;justify-content:center;
  opacity:.62;transition:opacity .15s ease,transform .15s ease}
.ikona svg{width:18px;height:18px;display:block}
.nav a.it.on .ikona,.nav a.it:hover .ikona{opacity:1;transform:scale(1.06)}
.d-pink{background:var(--pink)!important} .d-lime{background:var(--lime)!important}
.d-teal{background:var(--teal)!important} .d-amber{background:var(--amber)!important}
/* Ikona kreslí TAHEM, ne výplní — barva k ní tedy musí přijít přes
   `color`, ne `background`. `.d-*` třídy zůstávají beze změny, aby
   čtvereček dál fungoval u položek, které ikonu nemají. */
.ikona.d-pink{background:none!important;color:var(--pink)}
.ikona.d-lime{background:none!important;color:var(--lime)}
.ikona.d-teal{background:none!important;color:var(--teal)}
.ikona.d-amber{background:none!important;color:var(--amber)}
.ikona.d-blue{background:none!important;color:var(--znacka)}
.ikona.d-green{background:none!important;color:var(--lime)}
.navfoot{margin-top:auto;padding-top:18px;border-top:1px solid var(--grid)}
/* Dlaždice uživatele je ODKAZ do nastavení účtu, ne popisek — proto
   má stav po najetí a ozubené kolo. Bez viditelné reakce vypadá
   klikací prvek jako nefunkční, a to je horší než prvek, který se
   klikat nedá. */
.navfoot a.who{display:flex;align-items:center;gap:9px;padding:6px;margin-bottom:8px;
  color:var(--ink-2);font-size:13.5px;text-decoration:none;
  border-radius:var(--cut-sm) 0 var(--cut-sm) 0}
.navfoot a.who:hover{background:var(--navy-soft);color:var(--ink);text-decoration:none}
.navfoot a.who:focus-visible{outline:2px solid var(--znacka);outline-offset:2px}
/* Dlouhé přihlašovací jméno (e-mail) nesmí panel roztáhnout — bez
   `min-width:0` flexový prvek pod svůj obsah nezmenší. */
.navfoot a.who .who-t{min-width:0;overflow-wrap:anywhere}
.navfoot a.who .who-r{color:#7C8894;font-size:12px}
.navfoot a.who .who-i{margin-left:auto;flex:0 0 auto;opacity:.5;display:flex}
.navfoot a.who:hover .who-i{opacity:1}
.navfoot .av{width:30px;height:30px;flex:0 0 30px;border-radius:var(--cut-sm) 0 var(--cut-sm) 0;background:var(--pink);
  color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}
.navfoot button{width:100%;font:inherit;font-size:13.5px;font-weight:500;text-align:left;padding:9px 10px;cursor:pointer;
  background:var(--sheet);border:1px solid var(--navy-line);border-radius:var(--cut-sm) 0 var(--cut-sm) 0;color:var(--ink-2)}
.navfoot button:hover{background:var(--navy-soft);color:var(--ink)}
.scrim{position:fixed;inset:0;background:rgba(29,39,51,.55);z-index:65;display:none}
.scrim.on{display:block}

/* Tečková síť místo čtverečků. Čtverečky kreslily přes obsah
   mřížku, kterou oko pořád skládalo; tečky drží stejný rytmus,
   ale nekonkurují textu. */
/* Svislý flex, aby se výška obsahu dala odvodit MĚŘENÍM, ne konstantou.
   Děti jsou jen dvě: lišta a tělo. */
.main{min-width:0;display:flex;flex-direction:column;
  background-image:radial-gradient(circle at 1px 1px,var(--bod) 1px,transparent 0);
  background-size:16px 16px;background-position:8px 8px;min-height:100vh;min-height:100dvh}
.mtop{display:flex;align-items:center;padding:11px 0;border-bottom:1px solid var(--grid);
  /* Průhledná varianta papíru. Dřív tu bylo pevné rgba(245,247,249,.94)
     a ve tmě z toho zůstal bílý pruh přes celou šířku. */
  background:var(--paper-pruh);backdrop-filter:blur(8px);position:sticky;top:0;z-index:40}
/* Vnitřek lišty sedí na témž sloupci rastru jako obsah pod ní, proto
   zůstane zůstatek kreditů svisle nad pravou hranou karet. */
.mtop-in{width:100%;max-width:1430px;padding:0 var(--sl4)}
.mtop-pas{display:flex;align-items:center;gap:12px;width:100%}
.mtop .ttl{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em}
.burger{font:inherit;font-size:18px;line-height:1;padding:7px 11px;cursor:pointer;background:var(--sheet);
  border:1px solid var(--grid);border-radius:var(--cut-sm) 0 var(--cut-sm) 0;color:var(--ink)}
.mbody{padding:24px var(--sl4) 40px;width:min(100%,1430px)}
/* KONEC MAGICKÉ KONSTANTY (0.65.2).
   Výška mřížky dlaždic se do 0.65.1 počítala jako `100vh − 330`, kde
   330 byl odhad všeho nad ní. Jenže to „nad ní" není konstanta: delší
   jméno učitele nebo zalomené uvítání horní řadu zvětší a mřížka pak
   přeteče přes spodní hranu okna. Nově výšku určuje flex — tělo
   vyplní zbytek okna, horní řada si vezme, co potřebuje, a mřížka
   dostane, co zbude. Žádné číslo se neodhaduje. */
.mbody-plne{display:flex;flex-direction:column;
  /* 55 px lišta + 26 a 44 px výplň těla. Tohle jsou hodnoty, které
     tenhle soubor sám nastavuje a nemění se s obsahem — na rozdíl od
     výšky horní řady, na které dřív stála konstanta 330. */
  min-height:calc(100vh - 125px);min-height:calc(100dvh - 125px)}
@media (min-width:1000px){
  .nav{transform:none}
  .scrim{display:none!important}
  .burger{display:none}
  .main{margin-left:var(--navw)}
  .mbody{padding:26px var(--sl4) 44px}
}

/* ---------- obsahove prvky ---------- */
.cols{display:grid;gap:14px}
@media (min-width:620px){.cols.c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:620px) and (max-width:1179px){.cols.c3,.cols.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--sheet);border:1px solid var(--grid);border-radius:var(--cut-lg) 0 var(--cut-lg) 0;padding:18px}
.card h3{margin-bottom:6px}
.card p{font-size:14.5px;color:var(--ink-2)}
.stat{background:var(--sheet);border:1px solid var(--grid);border-radius:var(--cut-lg) 0 var(--cut-lg) 0;padding:16px 18px}
.stat .n{font-family:var(--disp);font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .l{font-size:13px;color:var(--ink-2);margin-top:6px}
.stat.s-pink .n{color:var(--pink)} .stat.s-lime .n{color:var(--lime-d)} .stat.s-teal .n{color:var(--teal)}

.tile{display:block;width:100%;text-align:left;background:var(--sheet);border:1px solid var(--grid);
  border-radius:var(--cut-lg) 0 var(--cut-lg) 0;padding:17px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .15s,transform .15s;border-top:4px solid var(--grid)}
.tile:hover{border-color:var(--navy-line);transform:translateY(-2px)}
.tile.t-pink{border-top-color:var(--pink)} .tile.t-lime{border-top-color:var(--lime)}
.tile.t-teal{border-top-color:var(--teal)} .tile.t-ink{border-top-color:var(--ink)}
.tile:hover.t-pink{border-color:var(--pink);border-top-color:var(--pink)}
.tile:hover.t-lime{border-color:var(--lime);border-top-color:var(--lime)}
.tile:hover.t-teal{border-color:var(--teal);border-top-color:var(--teal)}
.tile .k{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.tile .t{font-family:var(--disp);font-weight:600;font-size:1.06rem;letter-spacing:-.01em;margin:7px 0 4px}
.tile .s{font-size:13.5px;color:var(--ink-2)}

/* HORNI PAS ZAKA (0.61.0). Datum, odpocet ke zkousce a zustatek kreditu
   byly rozsypane po obrazovce prehledu: odpocet pod oslovenim, kredity
   v hlavicce, rozpad utraty ve vlastni karte uprostred stranky. Zpetna
   vazba od uzivatelu byla, ze je toho na jeden pohled moc.

   Tyhle tri udaje ale nepatri jedne obrazovce — plati porad. Proto jsou
   v listne nad obsahem a dite je vidi i v procvicovani a v testu, kde
   je potrebuje nejvic. */
.mtop-fakta{margin-left:auto;display:flex;align-items:center;gap:12px;
  font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.mtop-fakta .odd{width:1px;height:13px;background:var(--grid)}
/* Čas nad úlohami dnes. Drážka je úzká schválně — je to ukazatel tempa
   v liště, ne hlavní sdělení obrazovky. */
.mtop-cas{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mtop-cas .drah{width:64px;height:6px;border-radius:3px;background:var(--navy-soft);
  overflow:hidden;display:inline-block}
.mtop-cas .drah i{display:block;height:6px;border-radius:3px;background:var(--znacka);
  transition:width .3s}
.mtop-cas.hotovo .drah i{background:var(--teal)}
.mtop-cas.hotovo{color:var(--teal-d)}
@media (max-width:900px){.mtop-cas .drah{display:none}}
.mtop-kredit{font:inherit;font-size:12.5px;cursor:pointer;background:var(--znacka-s);
  color:var(--znacka-d);border:1px solid transparent;border-radius:999px;
  padding:5px 11px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.mtop-kredit:hover{border-color:var(--znacka)}
.mtop-kredit[aria-expanded="true"]{border-color:var(--znacka)}
/* Panel visi na listne, ne na obsahu: listna je sticky, takze zustane
   u tlacitka i kdyz je stranka odrolovana. */
.mtop-panel{position:absolute;top:calc(100% + 6px);right:14px;z-index:60;
  width:min(430px,calc(100vw - 28px));background:var(--sheet);
  border:1px solid var(--grid);border-radius:var(--cut) 0 var(--cut) 0;
  padding:16px;box-shadow:0 14px 30px rgba(14,22,33,.16)}
/* Body a klíče (0.79.0) — vedle kreditů, stejný tvar, jiná barva. */
.mtop-odmeny{font:inherit;font-size:12.5px;cursor:pointer;background:var(--amber-s);
  color:var(--ink);border:1px solid transparent;border-radius:999px;margin-right:8px;
  padding:5px 11px;display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.mtop-odmeny:hover{border-color:var(--amber)}
.mtop-odmeny .odd{width:1px;height:13px;background:var(--grid);margin:0 3px}
.mtop-odmeny .klic-prazdny{display:inline-block;width:13px;height:13px;border-radius:50%;
  border:1.5px dashed var(--ink-3)}
@media (max-width:760px){.mtop-fakta .datum,.mtop-fakta .odd{display:none}}
/* Na telefonu jen čísla se značkou — tři slova vedle sebe lištu
   roztáhla přes okraj a stránka jezdila do strany (0.79.0). */
@media (max-width:560px){.mtop-odmeny .slovo,.mtop-kredit .slovo{display:none}
  .mtop-odmeny,.mtop-kredit{padding:5px 9px;margin-right:4px}}
@media (max-width:460px){.mtop-fakta{display:none}}

/* VELKE DLAZDICE S IKONOU. Ikonu kresli nas kod jako SVG, ne obrazek:
   bere barvu z motivu (zelena/modra/zluta, svetly i tmavy), nestahuje
   se a nema v sobe zapecený text, ktery by se nedal opravit. */
/* ČTYŘI HLAVNÍ DLAŽDICE PŘEHLEDU.
   Ikona je rastrový obrázek dodaný zadavatelem (`public/ikony/*.png`,
   průhledné pozadí). VĚDOMÝ ÚSTUPEK: na rozdíl od ostatní grafiky
   v rozhraní nereaguje na přepínač barvy značky — ve všech třech
   motivech zůstane zelenomodrá. Schváleno 15. 9. 2026.
   Výška ikony je v procentech dlaždice, aby se na nízkém okně zmenšila
   spolu s ní a všechny čtyři se vešly na obrazovku bez rolování. */
.tile.velka{padding:18px 22px;text-align:center;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;display:flex;min-height:0}
.tile.velka .tile-foto{height:min(58%,208px);max-height:58%;width:auto;flex:0 0 auto;min-height:0}
/* Obal tří řádků textu. Kvůli němu platí mezera flexu jen jednou,
   mezi ikonou a textem; uvnitř rozhoduje `margin` u `.t`. Výška řádku
   je `normal` i tady, protože popiska `.k` je řádkový prvek a její
   řádkový box by se jinak počítal z dědičných 1,6. */
.tile.velka .tile-text{display:block;line-height:normal}
/* Popiska a nadpis mají TĚSNÉ prokládání, ne globálních 1,6. Při
   dědičné výšce řádku je řádkový box nadpisu 36 px místo 26 a text
   v dlaždici naroste o 20 px — přesně o to se rozvržení rozešlo se
   schválenou předlohou, která běží na výchozím `normal`. */
.tile.velka .k{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;
  text-transform:uppercase;line-height:normal}
.tile.velka .t{font-family:var(--disp);font-weight:600;font-size:1.42rem;margin:7px 0 5px;line-height:normal}
.tile.velka .s{font-size:14.5px;color:var(--ink-2);line-height:1.45}
.tile-ico{display:block;width:76px;height:76px;margin-bottom:16px;color:var(--znacka)}
.tile.t-lime .tile-ico{color:var(--lime-d)}
.tile.t-teal .tile-ico{color:var(--teal)}
.tile.t-amber .tile-ico{color:var(--amber)}
.tile.t-amber{border-top-color:var(--amber)}
.tile:hover.t-amber{border-color:var(--amber);border-top-color:var(--amber)}
.tile-ico .sek{opacity:.42}

/* MŘÍŽKA SE NESMÍ ZMÁČKNOUT POD SVÉ DLAŽDICE (0.80, nález D. Seiferta
   27. 9. v Edge). S `min-height:0` se mřížka na nižším okně — typicky když
   pod ní přibude hláška o souhlasu — zmenšila pod součet podlah dlaždic.
   Dlaždice přetekly přes sebe i přes hlášku a po najetí myší (posun o 2 px
   vytvoří novou vrstvu) hlášku zakryly. Podlaha mřížky je proto 2 × podlaha
   dlaždice + mezera v každém výškovém pásmu; když se nevejde, roluje se. */
/* MŘÍŽKA ČTYŘ DLAŽDIC — TŘI PÁSMA, NE DVĚ (0.65.1).
   Do 0.65.0 byla pásma jen dvě: „široké okno" a „pod 900 px". Mezi tím
   leží tablet, kde se sešly dvě věci najednou — dvousloupcová mřížka
   s výškou počítanou z okna a uvítání zalomené do tří řádků. Horní řada
   tím povyrostla, pevná výška dlaždic to nevzala v úvahu a text
   v dlaždici vylezl přes spodní hranu. Výška z okna má smysl jen tam,
   kde je okna dost; jinde ji má určovat obsah.

   POZOR NA SPECIFIČNOST. Obrázek se nastavuje selektorem
   `.tile.velka .tile-foto` (tři třídy). Přepis v `@media` musí mít
   stejnou nebo vyšší specifičnost, jinak NEPLATÍ — a to i uvnitř
   media query. Přesně proto byl na mobilu obrázek v původní velikosti
   384 px: pravidlo `.prehled-dlazdice .tile-foto` (dvě třídy) prohrálo
   a procentní výška se v mřížce s `height:auto` nemá čeho chytit. */
.prehled-dlazdice{display:grid;gap:40px;grid-template-columns:repeat(2,minmax(0,1fr));
  margin-inline:calc(var(--sl6) - var(--sl4))}

/* Široké okno: mřížka si vezme zbytek okna, ať už ho zbylo kolik chce.
   `min-height` u dlaždice je podlaha čitelnosti — když je okno opravdu
   nízké, stránka se raději roluje, než aby se text zmáčkl. Strop drží
   dlaždice v rozumné velikosti na vysokém monitoru. */
@media (min-width:1181px){
  /* `flex-basis:0`, ne `auto`. S `auto` je základem VLASTNÍ výška
     obsahu (u mřížky dvou řad přes 1000 px), takže položka nemá co
     rozdělovat a jen roste — přesně tak přetékala stránka na nízkém
     okně. S nulovým základem dostane mřížka přesně to, co zbylo. */
  /* 0.80: podlaha mřížky = 2 dlaždice + mezera (s 0 přetékaly přes hlášku). */
  .prehled-dlazdice{grid-template-rows:repeat(2,minmax(0,1fr));
    flex:1 1 0;min-height:calc(2 * 296px + 40px);max-height:716px}
  .prehled-top{margin-bottom:clamp(20px,4vh,48px)}
  /* PODLAHA DLAŽDICE JE SPOČÍTANÁ, NE ODHADNUTÁ.
     Obsah = obrázek (58 % výšky dlaždice) + 10 px mezera + 78 px text
     + 36 px výplň. Aby se vešel, musí platit  v ≥ 124 / (1 − podíl).
     Pro 58 % to je 296 px. Když okno tolik místa nedá, stránka se
     raději roluje — text se neořezává nikdy.
     Na nízkém okně se podíl obrázku zmenší a s ním i podlaha; proporce
     schválené předlohy tím zůstanou pro velké monitory nedotčené. */
  .prehled-dlazdice .tile.velka{min-height:296px}
}
@media (min-width:1181px) and (max-height:940px){
  .prehled-dlazdice .tile.velka .tile-foto{height:min(48%,208px);max-height:48%}
  .prehled-dlazdice .tile.velka{min-height:240px}
  .prehled-dlazdice{min-height:calc(2 * 240px + 40px)}
}
@media (min-width:1181px) and (max-height:820px){
  .prehled-dlazdice .tile.velka .tile-foto{height:min(42%,208px);max-height:42%}
  .prehled-dlazdice .tile.velka{min-height:214px}
  .prehled-dlazdice .tile.velka .t{font-size:1.28rem}
  .prehled-dlazdice{min-height:calc(2 * 214px + 40px)}
}
/* Tablet (901–1180 px): dva sloupce, ale výšku určuje obsah. */
@media (min-width:901px) and (max-width:1180px){
  .prehled-dlazdice{gap:22px;margin-inline:0}
  .prehled-dlazdice .tile.velka{min-height:230px}
  .prehled-dlazdice .tile.velka .tile-foto{height:104px;max-height:none}
}
/* Mobil: jeden sloupec pod sebou. */
@media (max-width:900px){
  .prehled-dlazdice{grid-template-columns:1fr;gap:16px;margin-inline:0}
  .prehled-dlazdice .tile.velka{min-height:0;padding:16px 18px}
  .prehled-dlazdice .tile.velka .tile-foto{height:92px;max-height:none}
  .prehled-dlazdice .tile.velka .t{font-size:1.24rem}
}
/* Na užším okně by odsazení ze sloupce 4 ukrojilo příliš velký díl
   šířky (tabulky v konzoli, rozbor testu). Odsazení proto klesá po
   sloupcích rastru, ne skokem: sloupec 4 → 2 → okraj. */
@media (max-width:1180px){:root{--sl4:33px;--sl6:55px}}
@media (max-width:760px){:root{--sl4:18px;--sl6:18px}}
@media (max-width:620px){.tile-ico{width:58px;height:58px;margin-bottom:12px}
  .tile.velka{padding:14px 12px}}

/* UVITACI KARTA. Obrazek ucitele je kulaty a maly — na prehledu je to
   podpis, kdo s ditetem mluvi, ne vyber. Vyber je na #/ucitel. */
.uvitani{display:flex;align-items:center;gap:16px;padding:15px 18px}
/* Sloupec je sirsi nez obrazek kvuli odkazu pod nim: "Změnit učitele"
   se pri 74 px lamal na dve radky a vypadal jako dva odkazy. */
.uvitani-foto{width:92px;flex:0 0 92px;text-align:center}
.uvitani-foto a{white-space:nowrap;font-size:11.5px}
.uvitani-foto img{width:68px;height:68px;border-radius:50%;object-fit:cover;
  object-position:center top;display:block;margin:0 auto 6px;border:1px solid var(--grid)}
.pozdrav{font-family:var(--disp);font-weight:800;font-size:1.52rem;letter-spacing:-.02em;line-height:1.2}
.pozdrav2{font-size:1.02rem;font-weight:700;margin-top:4px;line-height:1.35}
.podpis{font-size:13px;color:var(--ink-2);margin-top:6px}
@media (max-width:520px){.uvitani{gap:13px;padding:14px}
  .uvitani-foto{width:84px;flex:0 0 84px}.uvitani-foto img{width:58px;height:58px}
  .pozdrav{font-size:1.24rem}}

/* HORNI RADA PREHLEDU JE ZAMERNE NESYMETRICKA. Uvitani je jedna veta
   a obrazek; plan je to, podle ceho se dite rozhoduje, a nese tri
   tlacitka. Stejne siroke sloupce by tomu daly stejnou vahu, kterou
   nemaji, a plan by se musel lamat do dvou radek. */
/* Horní řada sedí na sloupci 4 (dědí odsazení .mbody), čtyři dlaždice
   o dva sloupce dál — 44 px navíc z každé strany. Odstup mezi řadou
   a dlaždicemi je 48 px, mezi dlaždicemi 40: větší mezera odděluje dvě
   různé věci (kdo a co dnes × kam jít), menší drží skupinu pohromadě. */
.prehled-top{display:grid;gap:14px;margin-bottom:48px;flex:0 0 auto}
@media (min-width:900px){.prehled-top{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}}
.plan-karta{padding:15px 18px}
.plan-hlava{display:flex;align-items:center;gap:11px}
.plan-ico{width:34px;height:34px;flex:0 0 34px;color:var(--znacka)}
.plan-hlava b{font-family:var(--disp);font-size:1.06rem;letter-spacing:-.01em}

.note{background:var(--sheet);border:1px solid var(--grid);border-radius:var(--cut-lg) 0 var(--cut-lg) 0;overflow:hidden}
.note-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--grid);background:var(--paper)}
.note-body{padding:18px 16px 20px}
.task{font-size:15.5px;margin-bottom:14px}
.ans{display:inline-block;font-family:var(--mono);font-size:15px;padding:2px 6px;border-radius:5px 0 5px 0}
.ans.wrong{color:var(--red);background:var(--red-s);text-decoration:line-through;text-decoration-thickness:2px}
.ans.right{color:var(--green);background:var(--green-s)}
.hint{margin-top:14px;border-left:3px solid var(--teal);background:var(--teal-s);padding:11px 13px;border-radius:0 8px 8px 0;font-size:14.5px}
.hint b{font-weight:600}

.bubble{border-radius:var(--cut) 0 var(--cut) 0;padding:12px 14px;font-size:14.5px;max-width:46ch;margin-bottom:10px}
.bubble.me{background:var(--ink);color:var(--paper);margin-left:auto}
/* Obrázek k výkladu. Kreslí se currentColor, takže se barva řídí
   motivem a v tmavém režimu nezmizí. */
.obrazek-vykladu{margin-top:10px}
.obrazek-vykladu:empty{display:none}
.obrazek-vykladu svg{max-width:300px;width:100%;height:auto;color:var(--ink)}
.bubble.ai{background:var(--paper);border:1px solid var(--grid)}
.src{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--teal-d);
  background:var(--teal-s);border:1px solid #A9DCD9;border-radius:var(--cut-sm) 0 var(--cut-sm) 0;padding:3px 9px;margin-top:9px;cursor:pointer}
.nosrc{border-left:3px solid var(--amber);background:var(--amber-s);padding:11px 13px;border-radius:0 8px 8px 0;font-size:14px}
.safety{border-left:3px solid var(--red);background:var(--red-s);padding:12px 14px;border-radius:0 8px 8px 0;font-size:14px}
.notice{border:1px dashed var(--navy-line);background:var(--navy-soft);border-radius:var(--cut) 0 var(--cut) 0;padding:12px 14px;font-size:13.5px}
.new-req{border-left:3px solid var(--amber);background:var(--amber-s);padding:10px 13px;border-radius:0 8px 8px 0;font-size:13px;margin-bottom:16px}

.page-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:18px}
.page-head h2{font-size:1.6rem}
.bar{height:9px;background:var(--paper);border:1px solid var(--grid);border-radius:4px 0 4px 0;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--pink)}
.bar.b-teal > i{background:var(--teal)} .bar.b-lime > i{background:var(--lime)}
.row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--grid)}
.row:last-child{border-bottom:0}
/* HODNOTA VE STAVOVEM RADKU. Na karte ditete je hodnota jednou stitek
   (.pill, ~27 px), jindy tlacitko (.btn.sm, ~38 px) a jindy holy text
   (~21 px). Kdyz si vysku urcoval obsah, radek po udeleni souhlasu
   poskocil a dve karty vedle sebe se rozesly o ~30 px — ohlaseno
   23. 9. 2026. Slot ma proto pevnou vysku a obsah se v nem centruje,
   at je uvnitr cokoli. */
.row .hodnota{display:inline-flex;align-items:center;justify-content:flex-end;
  min-height:30px;gap:8px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--grid)}
td{padding:11px 10px;border-bottom:1px solid var(--grid);vertical-align:top}
.tblwrap{overflow-x:auto}
/* `color:var(--ink)` tu musí být výslovně. `.opt` je <button> a ten
   barvu textu NEDĚDÍ — `font:inherit` řeší jen písmo. Ve světlém
   režimu se výchozí barva prohlížeče shodou náhod blížila --ink,
   takže vada nebyla vidět; ve tmě zůstal text téměř nečitelný. */
.opt{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);
  background:var(--sheet);border:1px solid var(--grid);
  border-radius:var(--cut) 0 var(--cut) 0;padding:12px 14px;margin-bottom:9px;cursor:pointer}
.opt:hover{border-color:var(--navy-line)}
.opt.sel{border-color:var(--pink);background:var(--pink-s)}
.opt.ok{border-color:var(--green);background:var(--green-s)}
/* Zvolená špatná možnost (P1 0.80.1): neutrálně a s popiskem, ne
   růžovou. Popisek nese význam i tam, kde barvu nejde rozlišit. */
.opt.no{border-color:var(--ink-3);border-style:dashed;background:var(--navy-soft)}
.opt.no::after,.opt.ok::after{float:right;margin-left:10px;font-size:12px;font-weight:600}
.opt.no::after{content:"tvoje odpověď";color:var(--ink-2)}
.opt.ok::after{content:"✓ správně";color:var(--green)}
.opt .key{font-family:var(--mono);font-weight:500;margin-right:9px;color:var(--ink-3)}
/* SEZNÁMENÍ BEZ ROLOVÁNÍ (0.80, D. Seifert 27. 9.: „nevešlo se tlačítko
   na obrazovku a musí se scrolovat"). Volby vedle sebe místo pod sebou
   a tlačítka dole přilepená k okraji okna — na nízkém displeji jsou
   vidět i tehdy, když se obsah celý nevejde. */
.opt-mrizka{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.opt-mrizka.siroke{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.opt-mrizka .opt{margin:0;padding:10px 12px;text-align:center}
.ob-akce{display:flex;gap:10px;position:sticky;bottom:0;z-index:5;margin-top:16px;padding:14px 0 16px;
  background:linear-gradient(to bottom, transparent, var(--paper) 40%)}
.chip{display:inline-block;font:inherit;font-size:14px;padding:8px 14px;margin:0 8px 8px 0;cursor:pointer;
  background:var(--sheet);border:1px solid var(--grid);border-radius:var(--cut-sm) 0 var(--cut-sm) 0;color:var(--ink)}
.chip:hover{border-color:var(--navy-line)}
.chip.on{background:var(--lime-s);border-color:var(--lime);color:var(--lime-d);font-weight:600}
.timer{font-family:var(--mono);font-size:1.35rem;font-weight:500}
.timer.warn{color:var(--red)}
/* Poslední minuta. ZÁMĚRNĚ BEZ BLIKÁNÍ a bez červeného pruhu přes celý
   řádek — je to zkouška nanečisto, ne panika. Stačí, že se to dá
   přehlédnout hůř než předtím. */
.timer.dochazi{color:var(--amber)}

/* ---------- záznamový arch ---------- */
.arch{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
@media (max-width:760px){ .arch{grid-template-columns:1fr} }
.arch-vlevo{position:sticky;top:14px}
@media (max-width:760px){ .arch-vlevo{position:static} }
.arch-mrizka{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
/* Vyplněná a prázdná úloha se musí poznat NA PRVNÍ POHLED — mřížka je
   jediné místo, kde dítě pod časovým tlakem zjistí, co ještě nemá.
   První verze odlišovala jen slabým podbarvením (var(--navy-soft)),
   což je rozdíl, kterého si nikdo nevšimne. Teď je vyplněná plná
   v barvě značky, prázdná světlá s tečkovaným okrajem. */
.arch-c{font:inherit;font-size:12.5px;font-family:var(--mono);cursor:pointer;
  padding:7px 0;border:1px dashed var(--grid);border-radius:var(--cut-sm);
  background:var(--paper);color:var(--ink-3)}
.arch-c:hover{border-color:var(--znacka);color:var(--ink)}
.arch-c.ok{background:var(--znacka);border:1px solid var(--znacka);
  color:var(--paper);font-weight:700}
/* Označená („vrátím se k ní") si drží jantarový rám i když je
   vyplněná — jsou to dvě nezávislé informace. */
.arch-c.flag{border:2px solid var(--amber)}
.arch-c.ok.flag{box-shadow:inset 0 0 0 2px var(--amber)}
/* Podúlohy („15.3") se do buňky vejdou jen menším písmem (0.80.0). */
.arch-c.dlouhe{font-size:11px;letter-spacing:-.02em}
/* Svazek tvrzení: řádek = tvrzení + ANO/NE vedle sebe (0.80.0). */
.svazek-radek{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:10px 0;border-top:1px solid var(--grid)}
.svazek-volby{display:flex;gap:6px}
.svazek-volby .opt{margin:0;padding:8px 12px;min-width:84px}
@media (max-width:640px){ .svazek-radek{grid-template-columns:1fr} }
.arch-c.tady{outline:2px solid var(--ink);outline-offset:2px}
.arch-legenda{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle}
.arch-legenda.ok{background:var(--znacka)}
.arch-legenda.prazdna{border:1px dashed var(--grid);background:var(--paper)}
.arch-legenda.flag{border:2px solid var(--amber);background:var(--paper)}

/* ---------- rozbor po testu ---------- */
.rozbor{margin:10px 0 4px;padding:10px 0 0;border-top:1px solid var(--grid)}
.rozbor-ja{background:var(--navy-soft);color:var(--ink);border-radius:var(--cut-sm);
  padding:8px 11px;margin:0 0 8px;font-size:13.5px;align-self:flex-end;max-width:80%;margin-left:auto}
.rozbor-vstup{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rozbor-vstup input{flex:1;min-width:180px}
/* Pruh úspěšnosti v rozpadu výsledku. */
.pruh{height:5px;background:var(--navy-soft);border-radius:3px;overflow:hidden;margin-top:5px;max-width:260px}
.pruh>div{height:5px;border-radius:3px}
input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{
  font:inherit;font-size:15px;width:100%;padding:10px 12px;border:1px solid var(--grid);
  border-radius:var(--cut) 0 var(--cut) 0;background:var(--sheet);color:var(--ink)}
label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field{margin-bottom:14px}
.err{color:var(--red);font-size:13.5px;margin-top:10px;display:none}
.err.on{display:block}

/* ---------- prihlaseni ---------- */
/* Layout .split (obrázek vlevo, formulář vpravo) odstraněn —
   nahradila ho .stred s rastrem. */

/* ---------- modal ---------- */
.backdrop{position:fixed;inset:0;z-index:90;background:rgba(29,39,51,.55);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.modal{background:var(--sheet);border-radius:var(--cut-lg) 0 var(--cut-lg) 0;width:100%;max-width:520px;padding:24px;margin-top:24px;border:1px solid var(--grid)}
.modal h3{font-size:1.25rem;font-family:var(--disp);font-weight:800;margin-bottom:6px}
.two{display:grid;gap:12px}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}

/* ---------- persony ---------- */
.persona{background:var(--sheet);border:1px solid var(--grid);border-radius:var(--cut-lg) 0 var(--cut-lg) 0;padding:18px;
  text-align:left;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,transform .15s;width:100%}
.persona:hover{border-color:var(--navy-line);transform:translateY(-2px)}
.persona.sel{border-color:var(--pink);border-width:2px}
.persona svg{width:74px;height:74px;display:block;margin-bottom:12px}
/* Ilustrace učitele na kartě výběru. Výška je pevná, aby tři karty
   držely řádek i při různě vysokých obrázcích; `object-fit:contain`
   nechá postavu celou a `object-position:top` ji přisadí k hornímu
   okraji, ať nohy nemizí dřív než hlava. */
/* BEZ PODKLADU. Ilustrace jsou na bílém a `object-fit:contain` u nich
   nechává po stranách prázdno — podbarvené vypadalo jako šedé pruhy
   kolem obrázku. Bez podkladu postava prostě stojí na kartě. */
.ucitel-foto{width:100%;height:250px;object-fit:contain;object-position:center top;
  display:block;margin-bottom:12px}
@media (max-width:820px){ .ucitel-foto{height:190px} }
.persona .nm{font-family:var(--disp);font-weight:600;font-size:1.05rem}
.persona .st{font-size:13px;color:var(--ink-2);margin-top:5px}
.persona .ex{font-size:12.5px;color:var(--ink-2);margin-top:10px;padding-top:10px;border-top:1px solid var(--grid);font-style:italic}

/* ---------- onboarding ---------- */
.steps{display:flex;gap:6px;margin-bottom:22px}
.steps i{flex:1;height:5px;background:var(--grid);border-radius:3px 0 3px 0;display:block}
.steps i.on{background:var(--pink)}
footer{border-top:1px solid var(--grid);padding:26px 0 36px;font-size:13px;color:var(--ink-2);background:var(--sheet)}

/* ---------- rýsování ----------
   Plocha vlevo, nástroje vpravo.

   NA TELEFONU (P1 0.80.1). Do 0.80.0 se pod 980 px skládalo „plocha
   nahoře, panel pod ní" — nástroje tak byly pod plochou a dítě na
   telefonu jezdilo po každém kroku nahoru a dolů (vybrat nástroj →
   vyjet k ploše → kliknout → zpátky dolů). Teď jsou nástroje v liště
   NAD plochou, lišta se při rolování drží pod horní lištou aplikace
   a nástroje jsou v jedné vodorovně posuvné řadě s většími tlačítky.
   Postup a nápověda zůstávají pod plochou. */
.rys{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;
  grid-template-areas:"plocha lista" "plocha panel";grid-template-rows:auto 1fr}
.rys-plocha{grid-area:plocha}
.rys-lista{grid-area:lista;padding:14px}
.rys-panel{grid-area:panel}
.rys-radek .rys-nastroje + .rys-nastroje{margin-top:10px}
.rys-odev-m,.rys-kcemu-m{display:none}
@media (max-width:980px){
  .rys{grid-template-columns:minmax(0,1fr);grid-template-areas:"lista" "plocha" "panel";
    grid-template-rows:auto;gap:10px}
  .rys-lista{position:sticky;top:var(--mtop-h,57px);z-index:30;padding:10px 12px;
    box-shadow:0 6px 16px rgba(29,39,51,.12)}
  .rys-lista .rys-titul,.rys-lista .rys-odev,.rys-lista .rys-kcemu{display:none}
  /* Řada pokračuje doprava — poslední tlačítko se u okraje ztrácí,
     aby bylo poznat, že se dá posunout. Vpravo je rezerva, takže na
     konci řady je vidět celé. */
  .rys-radek{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:0 44px 4px 0;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
    -webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}
  .rys-radek > .rys-nastroje{display:contents}
  .rys-radek .rys-n{flex:0 0 auto;font-size:14px;padding:9px 13px;min-height:42px;white-space:nowrap}
  .rys-radek .rys-n.vysl{margin-left:8px}
  .rys-odev-m,.rys-kcemu-m{display:block;margin:0 0 10px}
  .rys-plocha{padding:6px}
}
.rys-plocha{background:var(--sheet);border:1px solid var(--grid);border-radius:14px 0 14px 0;
  padding:10px;overflow:hidden}
.rys-svg{width:100%;height:auto;display:block;cursor:crosshair;touch-action:manipulation;
  border-radius:10px 0 10px 0;background:var(--paper)}
.rys-stav{padding:8px 4px 2px;min-height:22px}
.rys-mriz line{stroke:var(--grid);stroke-width:.6;opacity:.55}
/* Zadání je tmavé a klidné, vlastní kroky výrazné — dítě má na první
   pohled vidět, co dostalo a co narýsovalo. */
.rys-svg .rp{stroke-width:1.7;fill:none;stroke-linecap:round}
.rys-svg .rk{stroke-width:1.4;fill:none}
.rys-svg .rp.zadani,.rys-svg .rk.zadani{stroke:var(--ink)}
.rys-svg .rp.zak,.rys-svg .rk.zak{stroke:var(--teal)}
.rys-svg .rb{stroke:#fff;stroke-width:1.6}
.rys-svg .rb.zadani{fill:var(--ink)}
.rys-svg .rb.zak{fill:var(--teal)}
/* POŘADÍ A VÁHA PRAVIDEL. Barva podle autorství (.zadani/.zak) má
   tři třídy, takže by přebila výběr i výsledek, kdyby ty měly dvě —
   označená osa se pak kreslila pořád tyrkysově jako každý jiný krok
   a označení nebylo poznat. Proto se tu píše i typ útvaru. */
.rys-svg .rp.vybrano,.rys-svg .rk.vybrano{stroke:var(--amber);stroke-width:3.4}
.rys-svg .rb.vybrano{fill:var(--amber);stroke:var(--amber)}
.rys-svg .rp.vysledek,.rys-svg .rk.vysledek{stroke:var(--znacka);stroke-width:3.2}
.rys-svg .rb.vysledek{fill:var(--znacka);stroke:var(--znacka)}
/* Široká průsvitná stopa pod výsledkem. Samotná barva nestačí:
   tyrkys žákových kroků a značková zeleň jsou si na plátně blízko. */
.rys-svg .rh{stroke:var(--znacka);stroke-width:11;opacity:.16;fill:none;stroke-linecap:round}
.rys-svg .rb.kandidat{fill:var(--amber);fill-opacity:.35;stroke:var(--amber);stroke-width:2}
.rys-svg .rt{font-size:13px;font-weight:600;fill:var(--ink);paint-order:stroke;
  stroke:var(--paper);stroke-width:3px}
.gantt-r > summary{list-style:none;cursor:pointer;border-radius:4px}
.gantt-r > summary::-webkit-details-marker{display:none}
.gantt-r > summary:hover{background:var(--navy-soft)}
.gantt-info{margin:2px 0 8px calc(11em + 8px);padding:8px 10px;background:var(--navy-soft);
  border-radius:8px;color:var(--ink-2);white-space:pre-line}
@media (max-width:640px){ .gantt-info{margin-left:0} }
.rys-nastroje{display:flex;flex-wrap:wrap;gap:6px}
.rys-n{font:inherit;font-size:12.5px;padding:6px 10px;border:1px solid var(--grid);
  background:var(--paper);color:var(--ink);border-radius:8px 0 8px 0;cursor:pointer}
.rys-n:hover{border-color:var(--teal)}
.rys-n.on{background:var(--teal);border-color:var(--teal);color:#fff}
.rys-n.vysl.on{background:var(--pink);border-color:var(--pink)}
.rys-kroky{margin:8px 0 0;padding-left:20px;font-size:13px;color:var(--ink-2)}
.rys-kroky li{padding:2px 0}
.rys-kroky li.vysl{color:var(--pink);font-weight:600}
.rys-ok{border-left:4px solid var(--lime)}
.rys-vada{border-left:4px solid var(--amber)}