/* =========================================================================
   Robot na zadani (PRACOVNI NAZEV, ceka na rozhodnuti Petra) -- prvky,
   ktere jsou jen na teto strance.

   Signature blok je JEDEN VSTUP, JEDEN VYROBEK: vodorovna linka blok -> kruh
   -> blok. Vlevo to, co da clovek, uprostred plny zeleny disk "robot" se
   ctyrmi kroky v mono, vpravo to, co prijde zpet. Tri modelove roboty se
   prepinaji zalozkami (nativni radio, klavesnice zdarma). Tvar je linka a ne
   smycka, protoze robot bezi jednou a skonci -- presne to stranka tvrdi.
   Kruh je plny disk, ne prstenec, aby se nepletl s okruhem na Propojeni.

   Pohyb: pri doscrollovani probehne JEDNOU cely prubeh za 2 s (vstup se
   rozsviti, tecka prejede do kruhu, kroky se vypisou po radku, tecka dojede
   do vystupu, ten se rozsviti). Pak vse stoji. Prepnuti zalozky nic
   neprehrava. Vychozi stav v CSS je koncovy; zavreny stav nasazuje skript
   tridou `pripravena` (sdilene odkryj() ze sluzba.js).

   Bez skriptu jsou videt vsechny tri roboty pod sebou i s nazvy; zalozky
   jsou v HTML skryte a odkryva je az skript.
   ========================================================================= */


/* ---------- Zalozky: tri radia stylovana jako tri tlacitka ---------- */
.zalozky{display:inline-flex;flex-wrap:wrap;gap:2px;margin-top:clamp(30px,3.6vw,44px);
  padding:4px;border:1px solid color-mix(in srgb,var(--papir) 22%,transparent);
  border-radius:999px;min-width:0}
.zalozky[hidden]{display:none}
.zalozka{position:relative}
.zalozka input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.zalozka span{display:flex;align-items:center;justify-content:center;
  font-family:var(--text);font-size:15px;font-weight:600;padding:9px 20px;min-height:44px;
  border-radius:999px;color:color-mix(in srgb,var(--papir) 70%,transparent);
  transition:background .18s var(--krivka-klid),color .18s var(--krivka-klid)}
.zalozka input:checked + span{background:var(--papir);color:var(--inkoust)}
.zalozka input:focus-visible + span{outline:2px solid var(--akcent-sv);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .zalozka input:not(:checked):hover + span{color:var(--papir)}
}

/* ---------- Jeden robot ---------- */
.roboti{margin-top:clamp(26px,3vw,36px)}
.robot + .robot{margin-top:clamp(40px,5vw,64px);padding-top:clamp(30px,4vw,48px);
  border-top:1px solid color-mix(in srgb,var(--papir) 14%,transparent)}
.js .robot:not(.aktivni){display:none}
.js .robot + .robot{margin-top:0;padding-top:0;border-top:0}
.robot-nazev{font-size:clamp(20px,1.8vw,26px);margin-bottom:6px}
.js .robot-nazev{display:none}
.robot-prokoho{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--papir) 58%,transparent)}

.stitek-mono{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--akcent-sv);margin-bottom:10px}

/* Linka: blok, spoj, kruh + kroky, spoj, blok. */
.prubeh{--kruh:clamp(96px,10vw,128px);
  margin-top:22px;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(36px,5vw,72px) minmax(0,1.15fr) clamp(36px,5vw,72px) minmax(0,1fr);
  align-items:start}
.vstup-blok,.vystup-blok{
  border:1px solid color-mix(in srgb,var(--papir) 42%,transparent);border-radius:var(--r-l);
  background:color-mix(in srgb,var(--papir) 8%,transparent);
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,28px);min-height:calc(var(--kruh) + 24px)}
.vstup-blok p,.vystup-blok p{font-size:15.5px;line-height:1.5}
.vstup-blok p + p,.vystup-blok p + p{margin-top:8px}
.citace{color:color-mix(in srgb,var(--papir) 70%,transparent);font-style:italic}
.priloha{font-family:var(--mono);font-size:12.5px;color:color-mix(in srgb,var(--papir) 58%,transparent)}
.vystup-blok .radky{font-family:var(--mono);font-size:12.5px;line-height:1.55;
  color:color-mix(in srgb,var(--papir) 70%,transparent);margin-top:10px;list-style:none}
.vystup-blok .radky li + li{margin-top:6px}
.vystup-blok .nadpisy{margin-top:8px;list-style:none;font-size:15px}
.vystup-blok .nadpisy li{padding-left:14px;position:relative}
.vystup-blok .nadpisy li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:1px;
  background:color-mix(in srgb,var(--papir) 50%,transparent)}
/* Jedine misto s barvou --vada: varovani pro cloveka, ne dekorace.
   Na tmavem pozadi svetlejsi varianta (kontrast 5,1:1). */
.domysleno{margin-top:12px;padding-top:10px;font-family:var(--mono);font-size:12.5px;line-height:1.5;
  color:var(--vada-sv);border-top:1px solid color-mix(in srgb,var(--vada-sv) 40%,transparent)}

.spoj{position:relative;height:1px;margin-top:calc(var(--kruh) / 2);
  background:color-mix(in srgb,var(--papir) 24%,transparent)}
.tecka{position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:#12A06B;opacity:0}

.robot-stred{display:grid;justify-items:center;gap:18px}
.kruh{width:var(--kruh);height:var(--kruh);border-radius:50%;background:var(--akcent);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papir);flex:none}
.kroky{list-style:none;font-family:var(--mono);font-size:12.5px;line-height:1.5;
  color:color-mix(in srgb,var(--papir) 74%,transparent);width:100%;max-width:34ch}
.kroky li{display:grid;grid-template-columns:1.4em minmax(0,1fr);gap:4px;padding:5px 0;
  border-top:1px solid color-mix(in srgb,var(--papir) 12%,transparent)}
.kroky li:first-child{border-top:0}
.kroky b{font-weight:500;color:var(--akcent-sv)}

/* Kde clovek zasahne: jeden radek pod celou linkou. */
.clovek{margin-top:22px;padding:16px 20px;border-radius:var(--r);
  border:1px dashed color-mix(in srgb,var(--papir) 32%,transparent);
  font-size:15.5px;max-width:78ch}
.clovek .stitek-mono{margin-bottom:6px;color:color-mix(in srgb,var(--papir) 58%,transparent)}

.linka-pozn{margin-top:clamp(26px,3vw,36px);font-family:var(--mono);font-size:12.5px;line-height:1.6;
  max-width:74ch;color:color-mix(in srgb,var(--papir) 58%,transparent)}

/* ---------- Jeden prubeh za 2 s. Zavreny stav (pripravena) nasazuje skript;
   po odkryti probehnou animace jednou a zustanou stat (fill both). ---------- */
.linka-sekce.pripravena .vstup-blok,.linka-sekce.pripravena .vystup-blok{
  border-color:color-mix(in srgb,var(--papir) 14%,transparent);
  background:color-mix(in srgb,var(--papir) 3%,transparent)}
.linka-sekce.pripravena .kruh{opacity:.5}
.linka-sekce.pripravena .kroky li{opacity:0;transform:translateY(4px)}

@keyframes rozsvit{from{border-color:color-mix(in srgb,var(--papir) 14%,transparent);
  background:color-mix(in srgb,var(--papir) 3%,transparent)}}
@keyframes zapni{from{opacity:.5}}
@keyframes vypis{from{opacity:0;transform:translateY(4px)}}
@keyframes jizda-vodorovne{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes jizda-svisle{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}

.linka-sekce:not(.pripravena) .vstup-blok{animation:rozsvit .3s var(--krivka) 0s both}
.linka-sekce:not(.pripravena) .spoj-1 .tecka{animation:jizda-vodorovne .4s var(--krivka-klid) .3s both}
.linka-sekce:not(.pripravena) .kruh{animation:zapni .2s var(--krivka-klid) .7s both}
.linka-sekce:not(.pripravena) .kroky li{animation:vypis .2s var(--krivka) both}
.linka-sekce:not(.pripravena) .kroky li:nth-child(1){animation-delay:.7s}
.linka-sekce:not(.pripravena) .kroky li:nth-child(2){animation-delay:.9s}
.linka-sekce:not(.pripravena) .kroky li:nth-child(3){animation-delay:1.1s}
.linka-sekce:not(.pripravena) .kroky li:nth-child(4){animation-delay:1.3s}
.linka-sekce:not(.pripravena) .spoj-2 .tecka{animation:jizda-vodorovne .4s var(--krivka-klid) 1.5s both}
.linka-sekce:not(.pripravena) .vystup-blok{animation:rozsvit .3s var(--krivka) 1.7s both}

/* Pod 900 px se linka preklopi na svislou: vstup nahore, kruh mensi s kroky
   vedle, vystup dole. */
@media (max-width:900px){
  .zalozky{display:flex;width:100%;border-radius:var(--r-l)}
  .zalozka{flex:1 1 auto}
  .zalozka span{border-radius:var(--r)}
  .prubeh{--kruh:72px;grid-template-columns:1fr}
  .vstup-blok,.vystup-blok{min-height:0}
  .spoj{width:1px;height:clamp(36px,8vw,56px);margin:0 auto}
  .tecka{top:0;left:50%;margin:0 0 0 -4px}
  .linka-sekce:not(.pripravena) .spoj-1 .tecka,
  .linka-sekce:not(.pripravena) .spoj-2 .tecka{animation-name:jizda-svisle}
  .robot-stred{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:18px}
  .kroky{max-width:none}
}
@media (max-width:600px){
  .zalozky{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .linka-sekce.pripravena .vstup-blok,.linka-sekce.pripravena .vystup-blok{
    border-color:color-mix(in srgb,var(--papir) 42%,transparent);
    background:color-mix(in srgb,var(--papir) 8%,transparent)}
  .linka-sekce.pripravena .kruh{opacity:1}
  .linka-sekce.pripravena .kroky li{opacity:1;transform:none}
}

/* ---------- Cenovka bez castky: tri slozky rozsahu ----------
   Stejne reseni ma mit stranka Propojeni, at "podle rozsahu" vypada vsude stejne. */
.cenovka-slozky{margin:12px 0 0;display:grid;gap:6px}
.cenovka-slozky > div{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);gap:10px;
  align-items:baseline;font-size:14px}
.cenovka-slozky dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--akcent)}
.cenovka-slozky dd{margin:0;color:var(--inkoust)}
.cenovka-slozky + .cenovka-pod{margin-top:12px}

/* ---------- Tri stroje, ktere si lide pletou ----------
   Jediny pripad tri veci vedle sebe: obsah je tabulka a srovnani je jeho
   smysl. Radky drzi na stejne vysce subgrid; pod 900 px tri karty pod sebou. */
.stroje-obal{margin-top:clamp(30px,3.6vw,44px);overflow-x:auto}
.stroje{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto repeat(5,auto);gap:0 14px;min-width:0}
.stroj{display:grid;grid-row:span 6;grid-template-rows:subgrid;
  border:1px solid var(--linka);border-radius:var(--r-l);background:var(--papir);overflow:hidden}
.stroj > *{padding:14px clamp(16px,1.8vw,22px);border-top:1px solid var(--linka)}
.stroj > h3{border-top:0;padding-top:22px;padding-bottom:16px;font-size:clamp(19px,1.6vw,23px);
  display:flex;flex-direction:column;gap:8px}
.stroj-tady{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--akcent)}
.stroj-stitek{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tlum);margin-bottom:5px}
.stroj p{font-size:15px;line-height:1.45;color:var(--tlum)}
.stroj.robot-sloupec{background:var(--akcent-sv);border-color:color-mix(in srgb,var(--akcent) 40%,transparent)}
.stroj.robot-sloupec > *{border-top-color:color-mix(in srgb,var(--akcent) 22%,transparent)}
.stroj.robot-sloupec p{color:var(--inkoust)}
.stroje-veta{margin-top:26px;font-family:var(--display);font-size:clamp(19px,2vw,26px);
  letter-spacing:-.025em;line-height:1.25;max-width:40ch}
@media (max-width:900px){
  .stroje{grid-template-columns:1fr;grid-template-rows:none;gap:14px}
  .stroj{grid-row:auto;grid-template-rows:none}
}

/* ---------- Delena skladba (stejna jako na Zadani a Mape firmy) ---------- */
.delene{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:26px}
.delene > div > p{color:var(--tlum);margin-top:14px;max-width:54ch}
.delene .zaver-odst{color:var(--inkoust);margin-top:22px;max-width:54ch}

/* ---------- Proc to u vas nikdo nepostavil: tri cisla pod sebou ---------- */
.cisla-svisle{display:grid;gap:14px;margin-top:4px}
.cisla-svisle > div{display:grid;grid-template-columns:minmax(0,2.4em) minmax(0,1fr);gap:16px;align-items:baseline;
  padding-bottom:14px;border-bottom:1px solid var(--linka)}
.cisla-svisle b{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.6vw,50px);
  letter-spacing:-.04em;line-height:1;color:var(--akcent)}
.cisla-svisle span{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--tlum)}
.dolozeny{margin-top:18px;font-size:15.5px;max-width:48ch}
.zdroj-mono{display:block;margin-top:12px;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--tlum)}

/* ---------- Co presne dostanete: pet polozek s cislem ---------- */
.vystupy{margin-top:clamp(30px,3.6vw,44px);border-top:1px solid var(--linka)}
.vystup{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--linka)}
.vystup-c{font-family:var(--mono);font-size:13px;color:var(--akcent);padding-top:4px}
.vystup h3{font-size:clamp(18px,1.5vw,22px)}
.vystup p{font-size:15.5px;color:var(--tlum);margin-top:8px;max-width:64ch}

/* ---------- Kde zustava clovek: tri mista vpravo ---------- */
.mista{list-style:none;margin-top:4px;border-top:1px solid var(--linka)}
.mista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--linka)}
.mista-c{font-family:var(--mono);font-size:13px;color:var(--akcent);padding-top:4px}
.mista h3{font-size:clamp(17px,1.4vw,20px);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mista p{font-size:15px;color:var(--tlum);margin-top:8px;max-width:50ch}
/* Stejna znacka "ceka" jako pod carou na strance AI zamestnance. */
.ceka{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tlum);border:1px solid var(--obrys);border-radius:var(--r-s);padding:3px 8px}
.clovek-veta{margin-top:22px;font-size:15.5px;max-width:60ch}

/* ---------- Co znamena "podle rozsahu": tri slozky, linka, provoz ---------- */
.slozky{margin-top:clamp(30px,3.6vw,44px);border-top:1px solid var(--linka);max-width:960px}
.slozka{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(14px,2.4vw,32px);
  padding:22px 0;border-bottom:1px solid var(--linka);align-items:start}
.slozka-stitek{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--akcent);padding-top:4px}
.slozka p{font-size:15.5px;color:var(--tlum);max-width:62ch}
.slozka.provoz{border-top:2px solid var(--inkoust);margin-top:14px}
.slozka.provoz .slozka-stitek{color:var(--inkoust)}
.slozka.provoz p{color:var(--inkoust)}
.rozsah-pozn{margin-top:20px;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--tlum);max-width:74ch}

/* ---------- Kde robot stoji na mape: ctyri radky s polohou ---------- */
.mapa-radky{margin-top:clamp(30px,3.6vw,44px);border-top:1px solid var(--linka);max-width:960px}
.mapa-radek{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:clamp(14px,2.4vw,32px);
  padding:22px 0;border-bottom:1px solid var(--linka);align-items:start}
.mapa-poloha{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tlum);padding-top:5px}
.mapa-radek h3{font-size:clamp(18px,1.5vw,22px)}
.mapa-radek h3 a{text-decoration-thickness:1px;text-underline-offset:3px}
.mapa-radek p{font-size:15.5px;color:var(--tlum);margin-top:8px;max-width:62ch}
.cesta-pozn{margin-top:20px;font-size:15px;color:var(--tlum);max-width:66ch}

@media (hover:hover) and (pointer:fine){
  .mapa-radek h3 a:hover{color:var(--akcent)}
}
@media (max-width:900px){
  .delene{grid-template-columns:1fr}
  .slozka,.mapa-radek{grid-template-columns:1fr;gap:6px}
  .slozka-stitek,.mapa-poloha{padding-top:0}
}