/* ============================================================
   NETMA — sken webu a přihláška ke spolupráci

   Blok je soběstačný: nese si vlastní tokeny a nespoléhá na nic
   z kostry stránky, na které stojí. Proto ho může volat homepage
   (v sekci #kontakt) i závěr případové studie.

   Značky si nese sám i pro tlačítka — na homepage se dřív půjčovala
   od `.vyzva__*`, což je třída karty, ne skenu; na studiích by nebyla.
   ============================================================ */
.sken{
  /* Blok stojí na homepage v levém sloupci karty a ve studii uprostřed
     vycentrované sekce. `text-align` proto neděděné - terminál a popisky
     polí se na střed lámat nesmí. */
  text-align:left;
  max-width:720px;margin-inline:auto;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --chybi:#f5b544;                       /* „nenašli jsme" není chyba, je to příležitost */
  --plot:rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:1.5rem;
  min-width:0;
}
/* `hidden` musí přebít cokoli, co těmhle blokům dá display */
.sken [hidden]{display:none!important}

/* ---- řádek s adresou -------------------------------------------------- */
.sken__label{
  display:block;margin-bottom:.6rem;
  color:var(--muted);font-size:.8rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.sken__radek{
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .45rem .45rem 1.1rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50px;
  background:rgba(0,0,0,.35);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.sken__radek:focus-within{
  border-color:rgba(102,252,241,.5);
  box-shadow:0 0 0 4px rgba(102,252,241,.08);
}
.sken__protokol{
  flex-shrink:0;
  /* #5c5c5c davalo 2,98 : 1, pod hranici AA pro bezny text */
  color:#7a7a7a;font-family:var(--mono);font-size:.95rem;
}
/* input nemá reset od `*{margin:0;padding:0}` — background a border zůstávají */
.sken__input{
  flex:1;min-width:0;
  padding:.85rem 0;
  border:0;background:none;appearance:none;
  color:var(--paper);
  font-family:var(--mono);font-size:1rem;
}
.sken__input::placeholder{color:#4d4d4d}
.sken__input:focus{outline:none}
/* stejný důvod: <button> bez resetu je bílý obdélník */
.sken__btn{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:.85rem 1.6rem;
  border:0;border-radius:50px;appearance:none;
  background:var(--mint);color:#000;
  font-family:inherit;font-weight:700;font-size:.85rem;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease;
}
.sken__btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 24px rgba(102,252,241,.25)}
.sken__btn:disabled{opacity:.45;cursor:progress}
.sken__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.sken__btn:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.sken__pod{margin-top:.9rem;color:#6b6b6b;font-size:.85rem;line-height:1.5}
.sken__chyba{
  margin-top:.9rem;
  color:var(--chybi);font-size:.9rem;
}

/* ---- terminál ---------------------------------------------------------- */
.terminal{
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  background:#05060a;
  overflow:hidden;
}
.terminal__hlava{
  display:flex;align-items:center;gap:.45rem;
  padding:.7rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
}
.terminal__tecka{width:10px;height:10px;border-radius:50%;background:var(--plot)}
.terminal__nazev{
  margin-left:.6rem;
  color:#5c5c5c;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.08em;
}
.terminal__telo{
  max-height:340px;overflow-y:auto;overscroll-behavior:contain;
  padding:1.1rem 1.2rem;
  font-family:var(--mono);font-size:.86rem;line-height:1.85;
  color:#c8c8c8;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;
}
.terminal__telo::-webkit-scrollbar{width:6px}
.terminal__telo::-webkit-scrollbar-thumb{border-radius:3px;background:rgba(255,255,255,.15)}
.radek{
  display:flex;gap:.6rem;
  animation:radek-prilet .25s ease both;
}
.radek__znak{flex-shrink:0;width:1ch;text-align:center}
.radek__text{min-width:0;word-break:break-word}
@keyframes radek-prilet{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.radek--prikaz{color:var(--paper)}
.radek--prikaz .radek__znak{color:var(--mint)}
.radek--krok{margin-top:.5rem;color:#8a8a8a}
.radek--ok .radek__znak{color:var(--mint)}
.radek--chybi{color:#d8d8d8}
.radek--chybi .radek__znak{color:var(--chybi)}
.radek--chyba{color:var(--chybi)}
/* kurzor bliká jen během běhu, ať po dokončení nic neruší */
.terminal__telo[data-bezi] .radek:last-child .radek__text::after{
  content:'';
  display:inline-block;
  width:.6ch;height:1em;
  margin-left:.35ch;
  background:var(--mint);
  vertical-align:-.15em;
  animation:kurzor 1s steps(2) infinite;
}
@keyframes kurzor{50%{opacity:0}}

/* ---- výsledek ---------------------------------------------------------- */
.vysledek{display:flex;flex-direction:column;gap:1.75rem}
.vysledek__hlava{display:flex;align-items:flex-start;gap:1.5rem}
.skore{
  flex-shrink:0;
  display:grid;place-items:center;
  width:96px;height:96px;
  border:1px solid rgba(102,252,241,.25);
  border-radius:50%;
  background:rgba(102,252,241,.06);
  font-family:var(--mono);line-height:1;
}
.skore b{display:block;color:var(--mint);font-size:2.25rem;font-weight:700}
.vysledek__nadpis{
  margin:.4rem 0 .6rem;
  font-weight:700;font-size:1.25rem;letter-spacing:-.01em;
  color:var(--paper);
}
.vysledek__popis{color:var(--muted);font-size:.95rem;line-height:1.6}
.kontroly{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.15rem 1.5rem;
  list-style:none;
}
.kontroly li{
  display:flex;align-items:center;gap:.6rem;
  padding:.45rem 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.95rem;color:#d8d8d8;
}
.kontroly li i{
  flex-shrink:0;
  display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;
  font-family:var(--mono);font-size:.7rem;font-style:normal;
}
.kontroly li[data-ok] i{background:rgba(102,252,241,.12);color:var(--mint)}
.kontroly li:not([data-ok]) i{background:rgba(245,181,68,.12);color:var(--chybi)}
.kontroly li:not([data-ok]){color:var(--paper)}

/* ---- výzva k přihlášce -------------------------------------------------- */
.sken__akce{position:relative;align-self:flex-start;display:inline-block}
.sken__tlacitko{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:12px;
  padding:1.2rem 2.5rem;
  border:0;border-radius:50px;appearance:none;
  background:var(--paper);color:#000;
  font-family:inherit;font-weight:700;font-size:1rem;
  letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background .3s ease,color .3s ease,transform .3s ease,opacity .3s ease;
}
.sken__tlacitko:disabled{opacity:.5;cursor:progress}
.sken__tlacitko svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .3s ease;
}
/* záře je gradient, ne blur - blur by se překresloval každý snímek */
.sken__zar{
  position:absolute;z-index:1;
  inset:-20px;
  border-radius:50px;
  background:radial-gradient(circle closest-side,rgba(102,252,241,.35) 0%,transparent 100%);
  opacity:.5;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.sken__akce:hover .sken__tlacitko,.sken__tlacitko:focus-visible{background:var(--mint);transform:translateY(-2px)}
.sken__akce:hover .sken__tlacitko svg{transform:translateX(4px)}
.sken__akce:hover .sken__zar{opacity:.9;transform:scale(1.15)}
.sken__tlacitko:focus-visible{outline:2px solid var(--mint);outline-offset:4px}

.sken__mikro{
  display:flex;align-items:center;gap:8px;
  margin-top:1.2rem;
  font-size:.9rem;color:var(--muted);
}
.sken__mikro svg{flex-shrink:0;width:16px;height:16px;fill:none;stroke:var(--mint);stroke-width:1.8}
/* text se pod 1024 px zalomí na dva řádky; bez tohohle se uvnitř svého
   boxu vycentruje a od ikony odskočí o půl řádku */
.sken__mikro span{text-align:left}

/* ---- přihláška ---------------------------------------------------------- */
.prihlaska{display:flex;flex-direction:column;gap:1.25rem}
.prihlaska__nadpis{
  margin:0;
  font-weight:700;font-size:1.25rem;letter-spacing:-.01em;
  color:var(--paper);
}
.prihlaska__mrizka{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pole{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.pole--siroke{grid-column:1/-1}
.pole label{color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.pole label span{color:#5c5c5c;font-weight:400;letter-spacing:0;text-transform:none}
.pole input,.pole textarea{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;appearance:none;
  background:rgba(0,0,0,.35);
  color:var(--paper);
  font-family:inherit;font-size:1rem;line-height:1.5;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.pole textarea{min-height:110px;resize:vertical}
.pole input:focus,.pole textarea:focus{
  outline:none;
  border-color:rgba(102,252,241,.5);
  box-shadow:0 0 0 4px rgba(102,252,241,.08);
}
.pole[data-chyba] input,.pole[data-chyba] textarea{border-color:var(--chybi)}
/* past na roboty: pro člověka neexistuje, pro čtečku je skrytá */
.past{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.prihlaska__pata{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
.prihlaska__pravni{flex:1;min-width:220px;color:#6b6b6b;font-size:.82rem;line-height:1.55}
.prihlaska__pravni a{color:#8a8a8a;text-decoration:underline;text-underline-offset:2px}
.prihlaska__pravni a:hover{color:var(--mint)}
.prihlaska__chyba{color:var(--chybi);font-size:.9rem}

/* ---- poděkování --------------------------------------------------------- */
.hotovo{
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
  padding:2.5rem;
  border:1px solid rgba(102,252,241,.2);border-radius:20px;
  background:rgba(102,252,241,.05);
}
.hotovo svg{width:36px;height:36px;fill:none;stroke:var(--mint);stroke-width:1.8}
.hotovo h3{font-weight:700;font-size:1.3rem;color:var(--paper)}
.hotovo p{max-width:52ch;color:var(--muted);font-size:1rem;line-height:1.65}

@media (max-width:768px){
  .sken__tlacitko{padding:1.1rem 1.9rem;font-size:.9rem}
  /* tlačítko pod adresu — vedle sebe by na input zbylo pár znaků */
  .sken__radek{flex-wrap:wrap;padding:1rem;border-radius:20px}
  .sken__input{padding:.35rem 0}
  .sken__btn{width:100%;justify-content:center}
  .terminal__telo{max-height:260px;font-size:.78rem}
  .vysledek__hlava{flex-direction:column;gap:1rem}
  .prihlaska__mrizka{grid-template-columns:1fr}
  .hotovo{padding:2rem 1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .radek{animation:none}
  .terminal__telo[data-bezi] .radek:last-child .radek__text::after{animation:none}
}