/* czechai.io — dokumentovy styl prevzaty z whitepaper.czechai.io
   Tridy zustavaji stejne jako v puvodnim aeo.css, meni se jen vzhled.
   Paleta, pisma i tvaroslovi (ostre 1px ramecky, monospace popisky,
   Arial Narrow verzalky v nadpisech) jsou 1:1 z whitepaperu. */
: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;
  --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:3px}
a:hover{color:var(--signal-2)}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
img{max-width:100%}
.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}

/* ---- horni lista: monospace, tvrda linka dole (jako topbar whitepaperu) ---- */
.site-head{
  position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:2px solid var(--line-strong);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
}
.nav{min-height:52px;display:flex;align-items:center;gap:24px}
.brand{
  margin-right:auto;color:var(--ink);text-decoration:none;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.30em;
}
.brand::before{
  content:"";display:inline-block;width:7px;height:7px;margin-right:9px;
  background:var(--signal);vertical-align:middle;
}
.nav nav{display:flex;gap:20px;flex-wrap:wrap}
.nav nav a{color:var(--ink-dim);text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:.10em}
.nav nav a:hover{color:var(--ink)}

/* ---- hlavicka dokumentu ---- */
.hero{padding:56px 0 30px;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;
}
.hero h1{
  font-family:var(--narrow);font-size:clamp(38px,6vw,72px);font-weight:700;
  text-transform:uppercase;letter-spacing:.005em;line-height:1.02;
  text-wrap:balance;margin:14px 0 16px;
}
.lead{max-width:58ch;color:var(--ink-dim);font-size:1.15em;line-height:1.5;text-wrap:balance;margin:0 0 20px}
.updated{
  color:var(--ink-faint);font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.10em;margin-top:20px;
}
.breadcrumbs{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.10em;margin:26px 0;
}
main{padding:0 0 110px}

/* ---- odpoved v ramu (callout z whitepaperu) ---- */
.answer{
  position:relative;border:1px solid var(--line-strong);background:var(--panel);
  padding:18px 20px 18px 24px;margin:26px 0;font-size:1.02em;max-width:900px;
}
.answer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--signal-grad)}

/* ---- sekce a nadpisy ---- */
section{scroll-margin-top:70px;margin-top:46px}
h2{
  font-family:var(--narrow);font-size:clamp(25px,3.4vw,38px);font-weight:700;
  text-transform:uppercase;letter-spacing:.005em;line-height:1.12;
  margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid var(--line-strong);
}
h3{font-family:var(--narrow);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.2;margin:26px 0 8px}
p{max-width:78ch;color:var(--ink-dim);margin:0 0 14px}
li{margin:.4em 0;color:var(--ink-dim)}

/* ---- karty: ostre ramy misto zaoblenych panelu ---- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.card{
  padding:20px 22px;border:1px solid var(--line);border-top:none;margin:-1px 0 0 -1px;
  background:var(--bg);
}
.card:hover{background:var(--panel)}
.card h3{margin:0 0 6px;font-size:17px}
.card p{margin:0;font-size:.95em}

/* ---- cislovane kroky ---- */
ol.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:0}
.steps li{
  counter-increment:s;position:relative;padding:16px 18px 16px 62px;
  border:1px solid var(--line);margin-top:-1px;background:var(--bg);
}
.steps li:before{
  content:counter(s,decimal-leading-zero);position:absolute;left:18px;top:16px;
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--signal);letter-spacing:.06em;
}

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

/* ---- tlacitka: hranata, jako v dokumentu ---- */
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.button{
  display:inline-block;padding:11px 20px;border-radius:0;text-decoration:none;
  font-family:var(--mono);font-size:12px;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.secondary{background:none;border:1px solid var(--line-strong);color:var(--ink)}
.button.secondary:hover{background:var(--panel);color:var(--ink)}

/* ---- paticka ---- */
.sources{font-size:14px;color:var(--ink-faint)}
.site-foot{
  border-top:2px solid var(--line-strong);padding:22px 0 40px;
  color:var(--ink-faint);font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;
}
.site-foot .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.site-foot a{color:var(--ink-dim);text-decoration:none}
.site-foot a:hover{color:var(--ink)}

@media(max-width:860px){
  .nav{align-items:flex-start;padding:12px 0}
  .nav nav{display:none}
  .hero{padding:38px 0 24px}
  .grid{grid-template-columns:1fr}
  .card{margin-left:0}
  .wrap{width:min(var(--max),calc(100% - 28px))}
  .answer{padding:16px 16px 16px 20px}
}
@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}
}

/* --- bocni sloupec s obsahem stranky (podle whitepaperu) --- */
.shell{display:flex;align-items:flex-start;gap:44px;width:min(1560px,calc(100% - 48px));margin:0 auto}
.shell>main.wrap,.shell>main.master{width:auto;max-width:none;margin:0;flex:1;min-width:0}
nav.toc{
  position:sticky;top:74px;flex:0 0 250px;width:250px;
  padding:22px 0 30px;border-right:1px solid var(--line);
  max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:none;
}
nav.toc::-webkit-scrollbar{display:none}
.toc-title{
  font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.18em;margin:0 18px 12px 12px;
}
nav.toc ul{list-style:none;margin:0;padding:0}
nav.toc li{position:relative;margin:0}
nav.toc a{
  display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline;
  padding:7px 16px 7px 12px;color:var(--ink-dim);text-decoration:none;font-size:13.5px;line-height:1.35;
  border-left:2px solid transparent;transition:color .18s ease,border-color .18s ease;background:none;
}
nav.toc a:hover{color:var(--ink);border-left-color:var(--line-strong)}
.toc-num{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--signal);letter-spacing:.06em}
nav.toc li.current a{color:var(--ink);font-weight:600}
nav.toc li.current::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--signal-grad);
}
@media(max-width:1100px){
  .shell{display:block;width:min(1180px,calc(100% - 48px))}
  nav.toc{display:none}
}

/* --- 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}}

/* ==========================================================================
   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 }
}

/* ==========================================================================
   Sjednoceni rozvrzeni se zbytkem webu (vzor: assets/search.css)
   Zmereno 24. 8. 2026 pri sirce 1440: tahle rodina mela .shell sirokou
   1560 px bez ramecku a font kapitol 16 px, zatimco zbytek webu ma bocni
   panel 280 px s rameckem a font 14,9 px. Nize se to srovnava.
   ========================================================================== */
.shell{
  box-sizing:border-box;
  width:min(var(--max),calc(100% - 48px));
  gap:3rem;
  /* stejne vodorovne odsazeni jako .layout ve vzoru, jinak obsah zacina
     o 20 px vlevo a stranky na sebe nesedi */
  padding:2rem 1.25rem 5rem;
}
.shell > .aside{
  order:-1; flex:0 0 280px; width:280px; min-width:0;
  position:sticky; top:4.4rem;
  border:1px solid var(--line-strong); border-radius:0;
  background:var(--panel); padding:1.1rem;
  font-size:14.88px;
}
.shell > .aside .kap-text{ font-size:12.5px }
.shell > .aside nav.toc{ display:block }
.shell > .aside .toc-title{ display:none }   /* nahrazuje ho predel */
@media(max-width:900px){
  .shell{ flex-direction:column }
  .shell > .aside{ order:0; position:static; flex:1 1 auto; width:auto }
}

/* horni lista: stejne vodorovne odsazeni jako .topbar-inner ve vzoru,
   jinak zacina o 20 px vlevo a lista na sousedni strance skace */
.site-head .wrap, .site-head .wrap.nav{
  box-sizing:border-box;
  padding-left:1.25rem;
  padding-right:1.25rem;
}

/* .nav nav a{font-size:12px} v aeo.css prebijelo velikost cislovane listy,
   takze lista byla na peti strankach vetsi a o 20 px vyssi nez na zbytku webu */
.nav nav.nav-cislovana a, .site-head .nav-cislovana a{ font-size:11.5px }
.nav nav.nav-cislovana .nav-cislo, .site-head .nav-cislovana .nav-cislo{ font-size:9.5px }
.site-head .nav{ min-height:0 }

/* `.nav nav{gap:20px}` v aeo.css prebijelo mezeru cislovane listy, takze
   mezera mezi radky byla 20 px misto 2 a lista byla o 18 px vyssi nez jinde */
.nav nav.nav-cislovana, .site-head .nav-cislovana{ gap:2px 14px }
.site-head .wrap.nav{ padding-top:9.6px; padding-bottom:9.6px }