/* czechai.io — dokumentovy styl prevzaty z whitepaper.czechai.io
   Nahrazuje assets/search.css. Tridy zustavaji stejne (layout, article, aside,
   topbar, hero, actions, alt, footer-inner, faq...), meni se jen vzhled:
   bila, ostre 1px ramy, monospace popisky, Arial Narrow verzalky. */
:root{
  --bg:#ffffff; --panel:#f5f7fa; --ink:#0b0d12; --ink-dim:#4a5568;
  --ink-faint:#6b7280; --line:#dde3ea; --line-strong:#0b0d12;
  --signal:#0b6bcb; --signal-2:#073f78; --signal-tint:#e7f0fb;
  --signal-grad:linear-gradient(135deg, var(--signal), var(--signal-2));
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --narrow:"Arial Narrow",Arial,"Helvetica Neue",Helvetica,sans-serif;
  /* zpetna kompatibilita se starymi nazvy */
  --panel-2:#eef2f7; --text:#0b0d12; --muted:#4a5568;
  --cyan:#0b6bcb; --violet:#073f78; --pink:#073f78;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
a{color:var(--signal);text-underline-offset:.2em}
a:hover{color:var(--signal-2)}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
img{max-width:100%}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:10;background:var(--ink);color:#fff;padding:.7rem 1rem}

/* ---- horni lista ---- */
.topbar{
  position:sticky;top:0;z-index:9;background:var(--bg);
  border-bottom:2px solid var(--line-strong);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
}
.topbar-inner{max-width:var(--max);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.6rem 1.25rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:.28em;font-size:12px}
.brand img{width:22px;height:22px}
.brand small{color:var(--ink-faint);font-weight:500;letter-spacing:.06em}
.nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:var(--ink-dim);text-decoration:none;font-size:11px;text-transform:uppercase;letter-spacing:.10em}
.nav a:hover{color:var(--ink)}

/* ---- hlavicka dokumentu ---- */
.hero{max-width:var(--max);margin:auto;padding:clamp(2.6rem,5vw,4.4rem) 1.25rem 2rem;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--signal);font-size:11px;font-weight:600}
h1{
  font-family:var(--narrow);font-size:clamp(2.3rem,5.4vw,4.4rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.005em;line-height:1.02;
  max-width:22ch;margin:.55rem 0 .9rem;text-wrap:balance;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);
}
.lead{max-width:58ch;color:var(--ink-dim);font-size:1.15em;line-height:1.5;text-wrap:balance}
.updated{color:var(--ink-faint);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.10em;margin-top:1rem}

/* ---- rozvrzeni: text + bocni panel ---- */
.layout{max-width:var(--max);margin:auto;padding:2rem 1.25rem 5rem;display:grid;grid-template-columns:280px minmax(0,1fr);gap:3rem;align-items:start}
.article{min-width:0}
aside,.aside{order:-1;position:sticky;top:4.4rem;border:1px solid var(--line-strong);border-radius:0;background:var(--panel);padding:1.1rem}
aside a,.aside a{text-decoration:none}

/* ---- nadpisy a text ---- */
h2{
  font-family:var(--narrow);font-size:clamp(1.5rem,2.9vw,2.2rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.005em;line-height:1.14;
  margin:2.4rem 0 .9rem;padding-bottom:.4rem;border-bottom:2px solid var(--line-strong);
}
h3{font-family:var(--narrow);font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em;margin:1.5rem 0 .5rem}
p{max-width:78ch;color:var(--ink-dim);margin:0 0 .9rem}
li{margin:.35em 0;color:var(--ink-dim)}
strong{color:var(--ink)}
blockquote{border-left:4px solid var(--signal);margin:1.2rem 0;padding:.2rem 0 .2rem 1rem;color:var(--ink-dim)}
table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:.95em}
th,td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
th{color:var(--ink);background:var(--panel);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}

/* ---- caste otazky ---- */
.faq details{border-top:1px solid var(--line);padding:.9rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-family:var(--narrow);font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);padding:.2rem 2rem .2rem 0}
summary::marker{color:var(--signal)}

/* ---- tlacitka ---- */
.cta,.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.button{
  display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.1rem;border-radius:0;
  text-decoration:none;font-family:var(--mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  background:var(--signal-grad);color:#fff;border:1px solid transparent;
}
.button:hover{color:#fff;filter:brightness(1.08)}
.button.alt,.alt{background:none;color:var(--ink);border:1px solid var(--line-strong)}
.button.alt:hover{background:var(--panel);color:var(--ink)}

/* ---- paticka ---- */
.footer{border-top:2px solid var(--line-strong)}
.footer-inner{
  max-width:var(--max);margin:auto;padding:1.6rem 1.25rem;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--ink-faint);font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;
}
.footer-inner a{color:var(--ink-dim);text-decoration:none}
.footer-inner a:hover{color:var(--ink)}

@media(max-width:900px){
  .layout{grid-template-columns:1fr;gap:2rem}
  /* na uzkem displeji patri text nahoru a mapa pod nej */
  aside,.aside{position:static;order:0}
  .nav{display:none}
  .hero{padding-top:2rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- dekorativni vrstva --- */
/* ============================================================
   Dekorativni vrstva prevzata z whitepaper.czechai.io
   gradientni linky, tecky, prechody, jemne animace
   ============================================================ */

/* --- 2px gradientni linka pod horni listou (whitepaper .topbar::after) --- */
.site-head,.topbar{position:sticky;isolation:isolate}
.site-head::after,.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--signal-grad);
}

/* --- pulzujici tecka u znacky (whitepaper .signal-dot) --- */
.brand::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:9px;vertical-align:middle;background:var(--signal-grad);
  box-shadow:0 0 0 0 var(--signal-tint);
  animation:tep 2.4s ease-out infinite;
}
@keyframes tep{
  0%{box-shadow:0 0 0 0 rgba(11,107,203,.45)}
  70%{box-shadow:0 0 0 7px rgba(11,107,203,0)}
  100%{box-shadow:0 0 0 0 rgba(11,107,203,0)}
}

/* --- odkazy v navigaci: podtrzeni vyjizdi zleva --- */
.nav nav a,.nav a{position:relative;transition:color .18s ease}
.nav nav a::after,.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--signal-grad);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.nav nav a:hover::after,.nav a:hover::after{transform:scaleX(1)}

/* --- gradientni prouzek u ramecku (whitepaper .callout::before) --- */
.answer,aside,.aside{position:relative}
.answer::before,aside::before,.aside::before{
  content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:5px;
  background:var(--signal-grad);
}

/* --- karty: jemne nadzvednuti a gradientni linka nahore --- */
.card{position:relative;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.card::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  background:var(--signal-grad);transform:scaleX(0);transform-origin:left;
  transition:transform .28s ease;
}
.card:hover{background:var(--panel);box-shadow:0 6px 22px rgba(11,13,18,.07);transform:translateY(-2px);z-index:1}
.card:hover::before{transform:scaleX(1)}

/* --- nadpisy sekci: cislo v monospace + gradientni podtrzeni --- */
section{counter-increment:sek}
main{counter-reset:sek}
h2{position:relative}
h2::before{
  content:counter(sek,decimal-leading-zero);
  font-family:var(--mono);font-size:.42em;color:var(--signal);
  letter-spacing:.10em;display:block;margin-bottom:6px;font-weight:700;
}
h2::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:64px;
  background:var(--signal-grad);
}

/* --- cislovane kroky: tecka na svislici --- */
ol.steps{position:relative}
ol.steps::before{
  content:"";position:absolute;left:27px;top:10px;bottom:10px;width:1px;background:var(--line);
}
.steps li{transition:background .2s ease}
.steps li:hover{background:var(--panel)}
/* tecka byla kreslena PRES cislo kroku - vznikal necitelny znak.
   Cislo ted lezi na svislici a maskuje ji vlastnim bilym podkladem. */
.steps li::before{
  background:var(--bg);padding:2px 5px;margin-left:-5px;
  border:1px solid var(--line-strong);line-height:1;
}
.steps li:hover::before{background:var(--signal-grad);color:#fff;border-color:transparent}

/* --- caste otazky: rozbaleni a barevny trojuhelnik --- */
.faq details{transition:background .2s ease}
.faq details[open]{background:var(--panel)}
.faq summary{transition:color .18s ease}
.faq summary:hover{color:var(--signal)}
.faq details[open] > *:not(summary){animation:rozbal .26s ease both}
@keyframes rozbal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* --- tlacitka --- */
.button{transition:filter .18s ease,transform .18s ease,background .18s ease,color .18s ease}
.button:hover{transform:translateY(-1px)}
.button.secondary:hover,.button.alt:hover{border-color:var(--signal)}

/* --- odkazy v textu: podtrzeni dojede pri najeti --- */
main a:not(.button):not(.brand){
  background-image:linear-gradient(var(--signal),var(--signal));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .25s ease,color .18s ease;text-decoration:none;
}
main a:not(.button):not(.brand):hover{background-size:100% 1px}

/* --- nadejeti obsahu pri nacteni --- */
.hero>*,.hero .wrap>*{animation:najed .5s ease both}
.hero>.eyebrow,.hero .wrap>.eyebrow{animation-delay:.02s}
.hero>h1,.hero .wrap>h1{animation-delay:.10s}
.hero>.lead,.hero .wrap>.lead{animation-delay:.18s}
.hero>.updated,.hero .wrap>.updated{animation-delay:.26s}
@keyframes najed{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- vlas nad patickou --- */
.site-foot,.footer{position:relative}
.site-foot::before,.footer::before{
  content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--signal-grad);
}

/* --- navrat na czechai.io --- */
.zpet{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--line-strong);padding:5px 11px;
  transition:background .18s ease,color .18s ease;
}
.zpet:hover{background:var(--signal-grad);color:#fff;border-color:transparent}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* --- prepinani na predchozi / dalsi stranku --- */
.pager{
  display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;
  margin:64px 0 0;padding-top:22px;border-top:2px solid var(--line-strong);
}
.pager-link{
  display:flex;flex-direction:column;gap:5px;padding:14px 16px;
  border:1px solid var(--line);text-decoration:none;background:none;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.pager-next{align-items:flex-end;text-align:right}
.pager-link:hover{background:var(--panel);border-color:var(--line-strong);transform:translateY(-2px)}
.pager-label{
  font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--signal);
  text-transform:uppercase;letter-spacing:.14em;
}
.pager-name{
  font-family:var(--narrow);font-size:17px;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.2;
}
.pager-pozice{
  align-self:center;font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--ink-faint);letter-spacing:.14em;white-space:nowrap;padding:0 6px;
}
@media(max-width:700px){
  .pager{grid-template-columns:1fr;gap:10px}
  .pager-next{align-items:flex-start;text-align:left}
  .pager-pozice{order:-1;justify-self:start;padding:0 0 4px}
}

/* --- poptavkovy formular --- */
.form-blok{border:1px solid var(--line-strong);background:var(--bg);padding:26px 28px;margin:26px 0 0;max-width:820px;position:relative}
.form-blok::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:5px;background:var(--signal-grad)}
.form-blok h2{margin-top:0}
.form-rada{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pole{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.pole label{font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim)}
.pole .nutne{color:var(--signal)}
.pole input,.pole textarea{
  font:inherit;font-size:16px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:0;padding:11px 12px;width:100%;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.pole textarea{min-height:150px;resize:vertical;line-height:1.55}
.pole input:focus,.pole textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-tint)}
.pole input[aria-invalid="true"],.pole textarea[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.10)}
.pole .chyba{font-size:13px;color:#b3261e;min-height:1px}
.pole-past{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-patka{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.form-blok button[type=submit]{
  font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  padding:12px 22px;border:1px solid transparent;border-radius:0;cursor:pointer;
  background:var(--signal-grad);color:#fff;transition:filter .18s ease,transform .18s ease;
}
.form-blok button[type=submit]:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.form-blok button[type=submit]:disabled{opacity:.55;cursor:progress;transform:none}
.form-pozn{font-size:13px;color:var(--ink-faint);margin:0}
.form-stav{margin:16px 0 0;padding:14px 16px;border:1px solid var(--line-strong);font-size:15px;display:none}
.form-stav.vidno{display:block;animation:najed .3s ease both}
.form-stav.uspech{border-color:var(--signal);background:var(--signal-tint);color:var(--ink)}
.form-stav.nezdar{border-color:#b3261e;background:rgba(179,38,30,.06);color:#7a1a15}
@media(max-width:700px){.form-rada{grid-template-columns:1fr;gap:0}.form-blok{padding:20px 18px}}


/* ==========================================================================
   bocni mapa - citelne polozky
   Polozky mapy byly holé <a> s display:inline a slévaly se do jedné věty.
   Nadpis mapy navíc bral pořadové číslo sekce (h2::before counter) a
   velikost běžného H2. Níže se z toho dělá čitelný seznam se štítkem.
   ========================================================================== */
aside a, .aside a{
  display:block; padding:.44rem 0; line-height:1.35; font-size:.93rem;
  color:var(--ink-dim); border-top:1px solid var(--line);
}
aside a:first-of-type, .aside a:first-of-type{ border-top:0; padding-top:0 }
aside a:hover, .aside a:hover{ color:var(--ink) }
aside a:focus-visible, .aside a:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

/* nadpis mapy = maly stitek, ne ocislovana sekce */
aside h2, .aside h2{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; line-height:1.3;
  margin:0 0 .7rem; padding:0 0 .55rem;
  border-bottom:1px solid var(--line-strong); color:var(--ink);
}
aside h2::before, .aside h2::before{ content:none }

/* ==========================================================================
   Cislovana horni lista - vsech 13 stranek na kazde strance
   Drive mela lista ctyri ruzne varianty a nejvys 5 z 13 polozek, bez cisel.
   Cislo je maly modry stitek nad/pred nazvem; aktualni stranka ma podtrzeni.
   ========================================================================== */
.nav-cislovana{
  display:flex; flex-wrap:wrap; gap:2px 14px; align-items:baseline;
  justify-content:flex-end;
}
.nav-cislovana a{
  display:inline-flex; align-items:baseline; gap:5px;
  padding:3px 0; text-decoration:none; white-space:nowrap;
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:#4a5568; border-bottom:2px solid transparent;
}
.nav-cislovana a:hover{ color:#0b0d12 }
.nav-cislovana a[aria-current="page"]{ color:#0b0d12; border-bottom-color:#0b5fff }
.nav-cislovana .nav-cislo{
  font-size:9.5px; font-weight:700; letter-spacing:.08em; color:#0b5fff;
  font-variant-numeric:tabular-nums;
}
.nav-cislovana a[aria-current="page"] .nav-cislo{ color:#0b0d12 }
.nav-cislovana .nav-en{ color:#6b7280 }
@media(max-width:1100px){
  .nav-cislovana{ gap:2px 10px }
  .nav-cislovana a{ font-size:10.5px }
}

/* ==========================================================================
   Dvouvrstve leve menu
   Vrstva 1 = hlavni kategorie (14 stranek), vrstva 2 = obsah teto stranky.
   Vizualni prvky: cislo v odznaku, barevna lista u aktualni kapitoly,
   ukazatel pozice "04 / 14" a predel mezi vrstvami.
   ========================================================================== */
.kapitoly{ display:block; margin:0 0 2px }
.kap-hlava{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:0 0 9px; padding:0 0 7px; border-bottom:1px solid var(--line-strong,#0b0d12);
}
.kap-titul{
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink,#0b0d12);
}
.kap-pozice{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; color:#0b5fff;
  font-variant-numeric:tabular-nums;
}
.kap-lom{ color:#c3ccd6; margin:0 2px }

.kap-seznam{ display:flex; flex-direction:column }
.kap-seznam a{
  position:relative; display:grid; grid-template-columns:22px minmax(0,1fr);
  gap:8px; align-items:baseline;
  padding:5px 0 5px 9px; text-decoration:none; line-height:1.3;
  border-left:2px solid transparent; transition:border-color .15s, color .15s;
}
.kap-num{
  font-size:9.5px; font-weight:700; color:#8a97a8; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.kap-text{ font-size:12.5px; color:#4a5568 }
.kap-seznam a:hover{ border-left-color:#c3ccd6 }
.kap-seznam a:hover .kap-text{ color:#0b0d12 }
.kap-seznam a.kap-aktivni{ border-left-color:#0b5fff }
.kap-seznam a.kap-aktivni .kap-text{ color:#0b0d12; font-weight:700 }
.kap-seznam a.kap-aktivni .kap-num{
  color:#fff; background:#0b5fff; border-radius:3px;
  padding:1px 3px; margin-left:-3px;
}
.kap-seznam a:focus-visible{ outline:2px solid #0b5fff; outline-offset:2px }

/* predel mezi vrstvou kategorii a obsahem stranky */
.kap-predel{
  display:flex; align-items:center; gap:9px;
  margin:15px 0 11px; color:#8a97a8;
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.kap-predel::before{ content:""; width:14px; height:2px; background:#0b5fff; flex:none }
.kap-predel::after{ content:""; flex:1; height:1px; background:#dde3ea }

/* puvodni nadpis druhe vrstvy uz je nahrazen predelem */
.kapitoly ~ h2, .kap-predel + h2,
.kapitoly ~ .toc-title, .kap-predel + .toc-title{ display:none }

@media(max-width:900px){
  .kap-seznam{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px }
}