/* Autoškola — jediný štýl. Dva vizuálne jazyky, zámerne odlišné:
   UČENIE = napĺňajúci sa pruh (pokrytie): modrá = vybavené, fialová = vrátiť sa,
   SKÚŠANIE = semafor (kvalita). V appke je práve jeden semafor.
   Tlačidlá majú farbu toho pruhu, ktorý plnia — inak by žiak nevidel súvis. */

:root{
  --bg:#fbfbfa; --karta:#fff; --fg:#1c1c1a; --mut:#6b6b66; --ln:#e2e0da;
  --akc:#b4441f;
  /* Učenie: dva odtiene jednej modrej sa v tenkom pruhu nedali rozlíšiť,
     preto dve rôzne farby — modrá = vybavené, fialová = chcem sa vrátiť. */
  --modra:#2563a8; --fialova:#7c4dbe;
  --zel:#2f7d4f; --oran:#d08a1f; --cerv:#c0392b;  /* skúšanie */
  --sivy:#e8e6e0;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#161513; --karta:#1e1d1a; --fg:#eceae4; --mut:#9b9992; --ln:#33312c;
         --sivy:#2b2925; }
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
 font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
main{max-width:46rem;margin:0 auto;padding:1.5rem 1rem 5rem}
h1{font-size:1.6rem;margin:0 0 .4rem}
h2{font-size:1.1rem;margin:0 0 .7rem}
/* Akcent patrí LEN zvýrazneniu vnútri vysvetlení (**takto**), nie štruktúre.
   Inak názov okruhu v hlavičke svieti ako varovanie. */
.odpovede .preco b, .vysvetlenie b, .dovysvetlenie b{color:var(--akc)}
/* pojem zo slovníka — tlačidlo, ktoré vyzerá ako podčiarknuté slovo */
.pojem{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
 text-decoration:underline dotted var(--akc);text-underline-offset:3px}
.pojem:hover{text-decoration-style:solid}
.pojem-panel{position:absolute;z-index:50;background:var(--karta);border:1px solid var(--ln);
 border-radius:10px;padding:.9rem 1rem;box-shadow:0 8px 30px rgba(0,0,0,.22)}
.pojem-panel h3{margin:0 .5rem .4rem 0;font-size:1rem}
.pojem-panel p{margin:0 0 .5rem}
.pojem-panel .po-slovensky{font-size:.93rem}
.pojem-panel .zakon{font-size:.87rem;color:var(--mut);border-left:2px solid var(--ln);padding-left:.6rem}
.pojem-panel .zdroj{font-size:.78rem;color:var(--mut);margin:0}
.pojem-panel .zavri{position:absolute;top:.4rem;right:.5rem;background:none;border:0;
 color:var(--mut);font-size:1.2rem;line-height:1;cursor:pointer}

/* hlavička */
header{display:flex;justify-content:space-between;align-items:center;gap:1rem;
 padding:.7rem 1rem;border-bottom:1px solid var(--ln);background:var(--karta)}
.znacka{font-weight:700;text-decoration:none;color:var(--fg)}
.znacka span{font-weight:400;color:var(--mut);font-size:.8rem}
.ucet{display:flex;gap:.8rem;align-items:center;font-size:.85rem;color:var(--mut)}
.ucet a{color:var(--mut)}

/* tlačidlá */
.tlacidlo{display:inline-block;padding:.5rem .9rem;border:1px solid var(--akc);
 border-radius:8px;background:var(--akc);color:#fff;text-decoration:none;
 font:inherit;font-size:.95rem;cursor:pointer}
.tlacidlo.druhotne{background:transparent;color:var(--fg);border-color:var(--ln)}
.tlacidlo.velke{font-size:1.05rem;padding:.7rem 1.3rem}
.tlacidlo.zelene{background:var(--zel);border-color:var(--zel)}
.tlacidlo.oranzove{background:var(--oran);border-color:var(--oran)}
.tlacidlo.modre{background:var(--modra);border-color:var(--modra)}
.tlacidlo.fialove{background:var(--fialova);border-color:var(--fialova)}
button:disabled{cursor:default}

/* úvod */
.uvod{max-width:32rem;margin:5rem auto;text-align:center;padding:0 1rem}
.uvod p{color:var(--mut);margin-bottom:2rem}

/* prehľad okruhov */
/* Legenda učí mapovanie farieb — preto vzorky, nie len text. */
.legenda{font-size:.85rem;color:var(--mut);margin:0 0 1.5rem;display:flex;
 flex-wrap:wrap;gap:.4rem 1.4rem}
.legenda div{display:flex;align-items:center;gap:.45rem}
.legenda b{color:var(--fg);font-weight:600}
.vzorka{display:inline-flex;gap:2px;flex:none}
.vzorka i{display:block;width:9px;height:9px;border-radius:2px}
.okruhy{display:flex;flex-direction:column;gap:.9rem}
.okruh{background:var(--karta);border:1px solid var(--ln);border-radius:10px;padding:1rem 1.1rem}
.okruh h2{display:flex;gap:.6rem;align-items:baseline}
.cislo{display:inline-flex;justify-content:center;align-items:center;min-width:1.7rem;height:1.7rem;
 border-radius:50%;background:var(--sivy);color:var(--mut);font-size:.85rem;flex:none}
.metriky{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:.8rem 0 1rem}
@media(max-width:560px){.metriky{grid-template-columns:1fr}}
.popis{font-size:.8rem;color:var(--mut);margin-bottom:.3rem}
.popis em{font-style:normal;color:var(--fg);font-weight:600}
.pruh{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--sivy)}
.pruh span{display:block;transition:width .3s}
/* učenie: dve odlíšiteľné farby, nie dva odtiene jednej */
.pruh.ucenie .vybavene{background:var(--modra)}
.pruh.ucenie .vratit{background:var(--fialova)}
/* skúšanie: semafor */
.pruh.skusanie .vybavene{background:var(--zel)}
.pruh.skusanie .vratit{background:var(--oran)}
.pruh.skusanie .zle{background:var(--cerv)}
.akcie{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.drobne{font-size:.78rem;color:var(--mut)}

/* sedenie */
.sedenie{display:flex;align-items:center;gap:1rem;margin-bottom:.7rem;font-size:.85rem;color:var(--mut)}
/* pruh celého okruhu priamo v sedení — žiak musí vidieť, ako ďaleko je */
.pruh-sedenia{margin-bottom:1.2rem}
.sedenie .kde{flex:1}
.sedenie .spat{color:var(--mut);text-decoration:none}
.postup{font-variant-numeric:tabular-nums}

/* karta */
.karta{background:var(--karta);border:1px solid var(--ln);border-radius:12px;padding:1.2rem}
.otazka{font-size:1.15rem;font-weight:600;line-height:1.45;margin-bottom:1rem}
.obrazok{display:block;max-width:100%;height:auto;margin:0 0 1rem;border-radius:8px}
.odpovede{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
.odpovede li{border-left:3px solid var(--ln);padding:.5rem .8rem;border-radius:0 6px 6px 0}
.odpovede .spravna{border-left-color:var(--zel);background:color-mix(in srgb,var(--zel) 8%,transparent)}
.odpovede .zla{border-left-color:var(--cerv);background:color-mix(in srgb,var(--cerv) 5%,transparent)}
.odpovede .text{display:block}
.odpovede .preco{display:block;margin-top:.35rem;font-size:.88rem;color:var(--mut)}
/* v učení sa vysvetlenie neskrýva — je to hlavný dôvod, prečo karta existuje */
.vysvetlenie{margin:1.2rem 0 0;border-top:1px solid var(--ln);padding-top:.8rem}
.vysvetlenie h3{margin:0 0 .4rem;font-size:.78rem;letter-spacing:.08em;
 text-transform:uppercase;color:var(--mut)}
.vysvetlenie p{margin:0}
.volba{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}

/* skúšanie */
.moznosti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.moznosti button{width:100%;text-align:left;padding:.7rem .9rem;border:1px solid var(--ln);
 border-radius:8px;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer;line-height:1.45}
.moznosti button:hover:not(:disabled){border-color:var(--akc)}
.moznosti button.bola-spravna{border-color:var(--zel);background:color-mix(in srgb,var(--zel) 12%,transparent)}
.moznosti button.bola-zla{border-color:var(--cerv);background:color-mix(in srgb,var(--cerv) 12%,transparent)}
.dovysvetlenie{margin-top:1.2rem;border-top:1px solid var(--ln);padding-top:.9rem}
.verdikt{font-weight:700;margin:0 0 .5rem}
.verdikt.ok{color:var(--zel)}
.verdikt.zle{color:var(--cerv)}
.dovysvetlenie .preco{margin:0 0 .7rem;font-size:.93rem}
.dovysvetlenie .vys{margin:0;color:var(--mut);font-size:.93rem}

/* stavy */
.hotovo{background:var(--karta);border:1px solid var(--ln);border-radius:12px;padding:2rem 1.2rem;text-align:center}
.hotovo .tlacidlo{margin:.3rem}
.nacitavanie,.chyba{color:var(--mut);padding:2rem 0;text-align:center}
.chyba{color:var(--cerv)}
.obrazok-chyba{margin:0 0 1rem;padding:.6rem .8rem;border:1px dashed var(--cerv);
 border-radius:8px;color:var(--cerv);font-size:.85rem}