/* ==========================================================================================
   21art · web „Střižna + Hledáček“ — stavebnice vzhledu webu (z prototypu docs/web-varianty-2026-10/cely-web/styl.css) (tmavá Ryska)       styl.css
   Písma: self-hosted /znacka/pisma.css — stránka ho načte před tímto souborem (záložní stack je v tokenech).
   Stránka: <link rel="stylesheet" href="styl.css"> + <script src="styl.js"></script> (relativně), na <body> class="art".

   PŘEHLED DÍLŮ (třídy)
   • Tokeny .......... :root — barvy Rysky, --k1…--k7 barvy klipů, písma --f-nad/--f-txt/--f-mono, velikosti --p1…--p6
                       (44/28/18/15/13/11.5), rohy --r1…--r3 (4/8/12), --okraj, --sirka, --hlava (výška lišty).
   • Rozvržení ....... .obal (šířka + okraj) · .sekce (svislý rytmus + linka) · .sec-hlava · .dva (2 sloupce → 1 na mobilu)
   • Písmo ........... h1–h3 · .kap (kapitola s čárkou) · .perex · .mini (malý mono nadpis) · .mono · .tlumeny · .sr (jen čtečka)
   • Prototyp ........ .proto — pruh „Prototyp · stránky:“ (staví ho art.prototypLista('soubor.html'))
   • Lišta okna ...... header.okno > .okno-in > a.logo · .projekt · nav.stranky>a[aria-current] · .tc-lista · .btn.mal ; .stopaz>span
                       (timecode a průběh podle polohy na stránce dělá styl.js samo; data-delka na .tc-lista = sekund „stopáže“)
   • Tlačítka ........ .btn (+.hlavni = oranžová, jedna na obrazovce · .tichy · .nebezpecne · .mal · .cela) · .ikb (ikonové, +.hraj, +.mal)
                       ikony: <svg class="ik" viewBox="0 0 16 16">…</svg> (+.plna)
   • Panely .......... .panel · .panel-hlava (mono popisek, vpravo <b>) · .panel-telo
   • Monitor ......... figure.monitor > .mon-hlava (+.vpravo) · .mon-obraz (style="--pomer:16/9", canvas uvnitř) · .mon-osa (segmenty + i.hlava-p)
   • HUD hledáčku .... .hud na obrazovém prvku = rohové značky + bezpečná zóna (.bez-zony vypne) · .hud-txt.lh/.ph/.ld/.pd (texty v rozích)
                       · .hud-kriz · .hud-pas (pruh nad/pod obrazem: .tl tlumené, .hodnota, .vpravo) · .rec · .baterie
                       · .sem-showreel (štítek místa pro skutečné video) · .ostreni (+.ostre) rámeček AF
   • Osa ............. .osa (role=slider) > i.osa-hotovo · i.osa-hlava · .osa-znacka(+.ok/.chyba) — ovládání art.osa(el,{delka})
   • Stopy ........... .stopy (style="--delka:60") > .stopy-radek > .stopa-jm + .stopa-plocha > .klip (style="--k:var(--k2);--od:0;--do:12")
                       · .stopy-pravitko · i.stopy-hlava (style="--x:.3")
   • Inspektor ....... .insp (panel vpravo) > .insp-blok · dl.insp-radky · .insp-velke (velké mono číslo)
   • Čipy a volby .... .cip/.cipy (štítek) · .volby > label.volba > input + span (zaškrtávací/přepínací čip) · .prepinac > button[aria-checked|aria-pressed]
   • Formulář ........ .pole > label + input/textarea/select (+[aria-invalid=true]) · .pole-mrizka (.cela) · .chyba-t · .napoveda
   • Stupnice stavu .. ol.stupnice[data-stav=0…3] > li×4 (Nahráno → Odesláno → Zhlédnuto → Schváleno) — art.stupnice(el,n)
   • Stav ............ .stav.ok/.pozor/.chyba/.info (štítek s tečkou) · .tecky>li.ok/.pozor/.chyba (seznam s tečkami) · .seznam (pomlčky)
   • Oznámení ........ .oznam (staví art.oznam(text,{druh})) · .potvrzeni (rámeček „Prototyp — na skutečném webu…“) · .ukazka (štítek ukázková data)
   • Kontakt ......... dl.kontakt-radky > .kontakt-radek (dt, dd, button[data-kopiruj]) · .kopie-in (e-mail v textu + malé tlačítko)
   • Tabulka ......... .tabulka (na mobilu se řádky skládají; td[data-k="Název"])
   • Patička ......... footer.pata (art.pata() / data-art="pata" ji vyplní: IČO, DIČ, plátce DPH, e-mail, telefon, Soukromí)
   Pravidla: oranžová (--ryska) jen ukazuje — hlavní tlačítko, hlava přehrávání, „teď“, co čeká na klienta. Stavy ok/pozor/chyba.
   Každá stránka má jednu živou věc. Úvod má sekce s id: #sluzby #postup #predani #poptavka #kontakt (odkazy z lišty jiných stránek).
   ========================================================================================== */

:root{
  color-scheme:dark;
  --tubus:#0B0C0B;--plech:#121412;--vrstva:#1A1D1A;--linka:#262A26;--linka2:#363A35;
  --rytina:#F2F2EC;--text2:#C9CCC4;--elox:#8B908A;--hloubka:#5D635C;
  --ryska:#FF6B1F;--ryska2:#FF8A4D;--ink:#2A1205;--ok:#7FB083;--pozor:#E0A33C;--chyba:#E0523C;--info:#8FA9C4;
  --obraz:#050605;
  --ok-slaba:rgba(127,176,131,.12);--pozor-slaba:rgba(224,163,60,.12);--chyba-slaba:rgba(224,82,60,.12);--ryska-slaba:rgba(255,107,31,.14);
  --clona:rgba(11,12,11,.84);--clona2:rgba(5,6,5,.6);--hrana:rgba(255,255,255,.10);
  --bezp:rgba(242,242,236,.28);--bezp2:rgba(242,242,236,.14);--roh:rgba(242,242,236,.62);--srafa:rgba(242,242,236,.07);
  --offline1:#4A120B;--offline2:#140807;
  --stin:0 18px 50px rgba(0,0,0,.45);
  /* barvy klipů na stopách — tlumené, ať oranžová zůstane jen pro „teď“ */
  --k1:#5C4A30;--k2:#2E4A4B;--k3:#4E3A46;--k4:#434A31;--k5:#2E3F57;--k6:#46474C;--k7:#343A34;
  --f-nad:"Archivo Narrow","Roboto Condensed","Arial Narrow","Avenir Next Condensed","Liberation Sans Narrow","Helvetica Neue",Arial,sans-serif;
  --f-txt:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --p1:44px;--p2:28px;--p3:18px;--p4:15px;--p5:13px;--p6:11.5px;
  --r1:4px;--r2:8px;--r3:12px;
  --hlava:58px;--okraj:clamp(16px,4vw,40px);--sirka:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:760px){:root{--hlava:96px}}

/* ---------- základ ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hlava) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tubus);color:var(--text2);font:400 var(--p4)/1.6 var(--f-txt);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ryska);color:var(--ink)}
img,canvas,svg{display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ryska);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skok{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ryska);color:var(--ink);padding:8px 12px;border-radius:var(--r1);text-decoration:none}
.skok:focus{top:8px}
.ik{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ik.plna{fill:currentColor;stroke:none}

/* ---------- rozvržení ---------- */
.obal{width:100%;max-width:var(--sirka);margin:0 auto;padding-inline:var(--okraj)}
.sekce{padding-block:clamp(48px,8vw,104px);border-top:1px solid var(--linka)}
.sekce.prvni{border-top:0;padding-top:clamp(28px,5vw,64px)}
.sec-hlava{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(24px,4vw,40px)}
.dva{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
@media (max-width:900px){.dva{grid-template-columns:minmax(0,1fr)}}

/* ---------- písmo ---------- */
h1,h2,h3{color:var(--rytina);font-family:var(--f-nad);font-weight:700;margin:0;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,76px);line-height:.98;letter-spacing:-.015em}
h1 em,h2 em{font-style:normal;color:var(--elox)}
h2{font-size:clamp(var(--p2),3.4vw,var(--p1));line-height:1.04}
h3{font-size:var(--p3);line-height:1.25;letter-spacing:.005em}
p{margin:0}
.kap{display:flex;align-items:center;gap:10px;margin:0;font:500 var(--p6)/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--elox)}
.kap::before{content:"";width:18px;height:1px;background:var(--linka2)}
.kap.ted::before{width:9px;height:7px;background:var(--ryska);clip-path:polygon(0 0,100% 50%,0 100%)}
.perex{font-size:var(--p3);line-height:1.55;color:var(--text2);max-width:40em}
.mini{margin:0 0 8px;font:500 var(--p6)/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--elox)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.tlumeny{color:var(--elox)}
code{font:400 .92em/1 var(--f-mono);color:var(--rytina);background:var(--vrstva);border:1px solid var(--linka);border-radius:var(--r1);padding:1px 5px;overflow-wrap:anywhere}

/* ---------- pruh prototypu (art.prototypLista) ---------- */
.proto{position:relative;z-index:60;background:var(--obraz);border-bottom:1px solid var(--linka);font:500 var(--p6)/1 var(--f-mono);color:var(--hloubka)}
.proto-in{display:flex;align-items:center;gap:4px 14px;max-width:var(--sirka);margin:0 auto;padding:7px var(--okraj) 7px 0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.proto-in::-webkit-scrollbar{display:none}
.proto b{position:sticky;left:0;z-index:1;padding:3px 10px 3px var(--okraj);margin-right:-4px;background:var(--obraz);box-shadow:8px 0 8px -4px var(--obraz);font-weight:500;color:var(--elox);letter-spacing:.08em;text-transform:uppercase}
.proto a{color:var(--elox);text-decoration:none;padding:3px 0;border-bottom:1px solid transparent}
.proto a:hover{color:var(--rytina)}
.proto a[aria-current="page"]{color:var(--rytina);border-bottom-color:var(--ryska)}

/* ---------- horní lišta = okno střižny ---------- */
.okno{position:sticky;top:0;z-index:50;background:var(--clona);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--linka)}
.okno-in{display:flex;align-items:center;gap:16px;height:var(--hlava);max-width:var(--sirka);margin:0 auto;padding-inline:var(--okraj)}
.logo{font:700 26px/1 var(--f-nad);color:var(--rytina);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.projekt{font:400 var(--p6)/1.3 var(--f-mono);color:var(--hloubka);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stranky{display:flex;gap:2px;margin-left:auto;background:var(--plech);border:1px solid var(--linka);border-radius:var(--r2);padding:3px}
.stranky a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 12px;border-radius:var(--r1);color:var(--elox);text-decoration:none;font:500 var(--p5)/1 var(--f-txt);white-space:nowrap;transition:color .15s,background .15s}
.stranky a:hover{color:var(--rytina)}
.stranky a small{font:400 var(--p6)/1 var(--f-mono);color:var(--hloubka)}
.stranky a[aria-current]{background:var(--vrstva);color:var(--rytina);box-shadow:inset 0 -2px 0 var(--ryska)}
.tc-lista{font:500 var(--p4)/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ryska);letter-spacing:.02em;min-width:11ch;text-align:right;white-space:nowrap}
.okno-in>.tc-lista{margin-left:auto}
.okno-in>.stranky~.tc-lista{margin-left:0}
.stopaz{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none}
.stopaz span{display:block;height:1px;width:0;background:var(--ryska)}
@media (max-width:1180px){.stranky a small,.projekt{display:none}}
@media (max-width:760px){
  .okno-in{flex-wrap:wrap;height:auto;min-height:var(--hlava);padding-block:8px;gap:8px 12px}
  .okno-in>.tc-lista,.okno-in>.stranky~.tc-lista{margin-left:auto;font-size:var(--p5);min-width:0}
  .stranky{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none}
  .stranky::-webkit-scrollbar{display:none}
  .stranky a{flex:1 0 auto;padding:0 10px}
}

/* ---------- tlačítka ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--linka2);border-radius:var(--r2);background:var(--plech);color:var(--rytina);font:500 var(--p4)/1.1 var(--f-txt);text-decoration:none;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.btn:hover{border-color:var(--elox)}
.btn.hlavni{background:var(--ryska);border-color:var(--ryska);color:var(--ink)}
.btn.hlavni:hover{background:var(--ryska2);border-color:var(--ryska2)}
.btn.tichy{background:transparent;border-color:transparent;color:var(--text2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--linka2)}
.btn.tichy:hover{color:var(--rytina);text-decoration-color:var(--elox)}
.btn.nebezpecne{background:transparent;border-color:var(--chyba);color:var(--chyba)}
.btn.nebezpecne:hover{background:var(--chyba-slaba)}
.btn.mal{min-height:36px;padding:0 12px;font-size:var(--p5)}
.btn.cela{width:100%;white-space:normal;text-align:center}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.ikb{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid var(--linka2);border-radius:var(--r2);background:var(--vrstva);color:var(--rytina);cursor:pointer}
.ikb:hover{border-color:var(--elox)}
.ikb.hraj{color:var(--ryska)}
.ikb.mal{width:30px;height:30px;border-radius:var(--r1)}
.akce{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- panely ---------- */
.panel{background:var(--plech);border:1px solid var(--linka);border-radius:var(--r3);min-width:0}
.panel-hlava{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--linka);font:500 var(--p6)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--elox)}
.panel-hlava b{font-weight:500;color:var(--text2)}
.panel-telo{padding:16px}

/* ---------- monitor ---------- */
.monitor{margin:0;background:var(--plech);border:1px solid var(--linka);border-radius:var(--r3);overflow:hidden;box-shadow:var(--stin);min-width:0}
.mon-hlava{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 8px 6px 12px;font:500 var(--p6)/1 var(--f-mono);letter-spacing:.06em;color:var(--elox);border-bottom:1px solid var(--linka);white-space:nowrap;overflow:hidden}
.mon-hlava .vpravo{margin-left:auto;display:flex;align-items:center;gap:10px}
.mon-obraz{position:relative;aspect-ratio:var(--pomer,16/9);background:var(--obraz);overflow:hidden}
.mon-obraz>canvas{position:absolute;inset:0;width:100%;height:100%}
.mon-osa{position:relative;display:flex;height:34px;border-top:1px solid var(--linka);background:var(--tubus)}
.mon-osa span{min-width:0;padding:0 8px;display:flex;align-items:center;border-right:1px solid var(--linka);font:500 var(--p6)/1 var(--f-mono);color:var(--hloubka);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s,background .2s}
.mon-osa span.ted{color:var(--rytina);background:var(--vrstva)}
.mon-osa span.chyba{color:var(--chyba);background:repeating-linear-gradient(135deg,var(--chyba-slaba) 0 6px,transparent 6px 12px)}
.hlava-p{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--ryska);pointer-events:none;z-index:2}
.hlava-p::before{content:"";position:absolute;top:0;left:-5px;width:12px;height:10px;background:var(--ryska);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}

/* ---------- HUD hledáčku ---------- */
.hud{position:relative}
.hud::before{content:"";position:absolute;inset:14px;z-index:2;pointer-events:none;
  background:linear-gradient(var(--roh),var(--roh)) 0 0/22px 1px,linear-gradient(var(--roh),var(--roh)) 0 0/1px 22px,
    linear-gradient(var(--roh),var(--roh)) 100% 0/22px 1px,linear-gradient(var(--roh),var(--roh)) 100% 0/1px 22px,
    linear-gradient(var(--roh),var(--roh)) 0 100%/22px 1px,linear-gradient(var(--roh),var(--roh)) 0 100%/1px 22px,
    linear-gradient(var(--roh),var(--roh)) 100% 100%/22px 1px,linear-gradient(var(--roh),var(--roh)) 100% 100%/1px 22px;background-repeat:no-repeat}
.hud::after{content:"";position:absolute;inset:5%;z-index:2;border:1px dashed var(--bezp2);pointer-events:none}
.hud.bez-zony::after{display:none}
.hud-txt{position:absolute;z-index:3;font:500 var(--p6)/1.2 var(--f-mono);letter-spacing:.06em;color:var(--rytina);text-shadow:0 1px 3px var(--obraz);pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.hud-txt.lh{top:calc(5% + 8px);left:calc(5% + 8px)}.hud-txt.ph{top:calc(5% + 8px);right:calc(5% + 8px)}
.hud-txt.ld{bottom:calc(5% + 8px);left:calc(5% + 8px)}.hud-txt.pd{bottom:calc(5% + 8px);right:calc(5% + 8px)}
.hud-txt.stred{left:50%;top:50%;transform:translate(-50%,-50%)}
.hud-kriz{position:absolute;z-index:2;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);pointer-events:none}
.hud-kriz::before,.hud-kriz::after{content:"";position:absolute;background:var(--bezp)}
.hud-kriz::before{left:50%;top:0;bottom:0;width:1px}.hud-kriz::after{top:50%;left:0;right:0;height:1px}
.hud-pas{display:flex;align-items:center;gap:18px;min-height:40px;padding:0 14px;background:var(--obraz);font:500 var(--p6)/1 var(--f-mono);letter-spacing:.1em;color:var(--text2);white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.hud-pas .tl{color:var(--hloubka)}
.hud-pas .hodnota{color:var(--rytina)}
.hud-pas .vpravo{margin-left:auto}
.rec{display:inline-flex;align-items:center;gap:7px;color:var(--rytina);font:500 var(--p6)/1 var(--f-mono);letter-spacing:.1em}
.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--chyba);animation:art-blik 1.6s steps(2,jump-none) infinite}
.rec.stop::before{animation:none;background:var(--hloubka)}
@keyframes art-blik{50%{opacity:.2}}
.baterie{display:inline-flex;align-items:center;gap:6px}
.baterie i{position:relative;width:22px;height:11px;border:1px solid var(--text2);border-radius:2px}
.baterie i::before{content:"";position:absolute;inset:1px;right:4px;background:var(--ok)}
.baterie i::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:3px;background:var(--text2)}
.sem-showreel{position:absolute;z-index:3;top:calc(5% + 6px);right:calc(5% + 6px);padding:3px 7px;border:1px dashed var(--bezp);border-radius:var(--r1);background:var(--clona2);font:500 10px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text2);pointer-events:none}
.ostreni{position:absolute;z-index:3;left:0;top:0;width:96px;height:64px;margin:-32px 0 0 -48px;pointer-events:none;will-change:transform;--c:var(--rytina)}
.ostreni::before{content:"";position:absolute;inset:0;
  background:linear-gradient(var(--c),var(--c)) 0 0/14px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 14px,linear-gradient(var(--c),var(--c)) 100% 0/14px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 14px,
    linear-gradient(var(--c),var(--c)) 0 100%/14px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 14px,linear-gradient(var(--c),var(--c)) 100% 100%/14px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 14px;background-repeat:no-repeat}
.ostreni.ostre{--c:var(--ryska)}
.ostreni span{position:absolute;left:0;top:calc(100% + 6px);font:500 10px/1 var(--f-mono);letter-spacing:.14em;color:var(--c);white-space:nowrap}

/* ---------- osa (přehrávač) ---------- */
.osa{position:relative;height:36px;cursor:pointer;touch-action:none;flex:1;min-width:0}
.osa::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--linka2)}
.osa-hotovo{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--text2);width:calc(var(--x,0) * 100%)}
.osa-hlava{position:absolute;top:5px;bottom:5px;left:calc(var(--x,0) * 100%);width:2px;margin-left:-1px;background:var(--ryska);pointer-events:none}
.osa-hlava::before{content:"";position:absolute;top:-2px;left:-5px;width:12px;height:9px;background:var(--ryska);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.osa-znacka{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;padding:0;border:0;border-radius:2px;transform:rotate(45deg);background:var(--pozor);cursor:pointer}
.osa-znacka.ok{background:var(--ok)}.osa-znacka.chyba{background:var(--chyba)}
.osa:focus-visible{outline-offset:4px}

/* ---------- stopy V1/V2/A1 ---------- */
.stopy{position:relative;--jm:52px;--delka:60;background:var(--plech);border:1px solid var(--linka);border-radius:var(--r3);overflow:hidden}
.stopy-radek{display:grid;grid-template-columns:var(--jm) minmax(0,1fr);border-bottom:1px solid var(--linka)}
.stopy-radek:last-of-type{border-bottom:0}
.stopa-jm{display:flex;flex-direction:column;justify-content:center;padding:0 10px;border-right:1px solid var(--linka);background:var(--tubus);font:500 var(--p6)/1.3 var(--f-mono);color:var(--elox)}
.stopa-jm b{font-weight:500;color:var(--rytina)}
.stopa-plocha{position:relative;height:56px}
.stopy-radek.a .stopa-plocha{height:38px}
.stopy-pravitko .stopa-plocha{height:26px;background:repeating-linear-gradient(90deg,var(--linka2) 0 1px,transparent 1px 10%) 0 100%/100% 6px no-repeat}
.stopy-pravitko .stopa-plocha span{position:absolute;bottom:8px;padding-left:4px;font:400 var(--p6)/1 var(--f-mono);color:var(--hloubka);left:calc(var(--t) / var(--delka) * 100%)}
.klip{position:absolute;top:6px;bottom:6px;left:calc(var(--od,0) / var(--delka) * 100%);width:calc((var(--do,1) - var(--od,0)) / var(--delka) * 100% - 2px);min-width:6px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:5px 7px;border:0;border-radius:var(--r1);background:var(--k,var(--k6));box-shadow:inset 0 1px 0 var(--hrana);color:var(--rytina);font:500 var(--p6)/1.2 var(--f-mono);text-align:left;overflow:hidden;cursor:pointer;transition:filter .15s,box-shadow .15s}
.klip:hover{filter:brightness(1.15)}
.klip b,.klip small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.klip small{color:var(--text2);font-weight:400}
.klip.vybrany,.klip[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--rytina)}
.klip.offline{background:repeating-linear-gradient(135deg,var(--offline1) 0 8px,var(--offline2) 8px 16px);color:var(--chyba)}
.stopy-hlava{position:absolute;top:0;bottom:0;z-index:2;width:2px;margin-left:-1px;background:var(--ryska);pointer-events:none;left:calc(var(--jm) + (100% - var(--jm)) * var(--x,0))}
.stopy-hlava::before{content:"";position:absolute;top:0;left:-5px;width:12px;height:10px;background:var(--ryska);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}

/* ---------- inspektor ---------- */
.insp{display:flex;flex-direction:column}
.insp-blok{padding:14px;border-bottom:1px solid var(--linka)}
.insp-blok:last-child{border-bottom:0}
.insp-velke{font:500 var(--p2)/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--rytina);letter-spacing:-.01em}
.insp-radky{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr);gap:6px 14px;margin:0;font-size:var(--p5)}
.insp-radky dt{font:500 var(--p6)/1.7 var(--f-mono);color:var(--hloubka);text-transform:uppercase;letter-spacing:.08em}
.insp-radky dd{margin:0;color:var(--rytina);overflow-wrap:anywhere;min-width:0}

/* ---------- čipy, volby, přepínač ---------- */
.cipy{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--linka2);border-radius:var(--r1);font-size:var(--p5);line-height:1.3;color:var(--text2)}
.volby{display:flex;flex-wrap:wrap;gap:6px}
.volba{position:relative}
.volba input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.volba span{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--linka2);border-radius:var(--r1);background:var(--tubus);color:var(--text2);font:500 var(--p5)/1.2 var(--f-txt);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s,background .15s,color .15s}
.volba span:hover{border-color:var(--elox);color:var(--rytina)}
.volba input:checked+span{background:var(--vrstva);border-color:var(--rytina);color:var(--rytina)}
.volba input:checked+span::before{content:"";width:6px;height:6px;margin-right:8px;border-radius:1px;background:var(--ryska)}
.volba input:focus-visible+span{outline:2px solid var(--ryska);outline-offset:2px}
.volba input:disabled+span{opacity:.45;cursor:not-allowed}
.prepinac{display:inline-flex;justify-self:start;align-self:start;gap:2px;background:var(--tubus);border:1px solid var(--linka);border-radius:var(--r2);padding:2px;max-width:100%;overflow-x:auto}
.prepinac button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:0;border-radius:var(--r1);background:transparent;color:var(--elox);font:500 var(--p5)/1 var(--f-mono);cursor:pointer;white-space:nowrap}
.prepinac button:hover{color:var(--rytina)}
.prepinac button[aria-checked="true"],.prepinac button[aria-pressed="true"]{background:var(--vrstva);color:var(--rytina);box-shadow:inset 0 -2px 0 var(--ryska)}

/* ---------- formulář ---------- */
.pole{display:grid;gap:6px;min-width:0}
.pole label,.pole .stitek-pole{font:500 var(--p6)/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--elox)}
.pole input,.pole textarea,.pole select{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--linka2);border-radius:var(--r1);background:var(--tubus);color:var(--rytina);font:400 var(--p4)/1.4 var(--f-txt)}
.pole textarea{min-height:96px;resize:vertical}
.pole input:focus,.pole textarea:focus,.pole select:focus{border-color:var(--elox);outline:none}
.pole input:focus-visible,.pole textarea:focus-visible,.pole select:focus-visible{outline:2px solid var(--ryska);outline-offset:1px}
.pole input::placeholder,.pole textarea::placeholder{color:var(--hloubka)}
.pole [aria-invalid="true"]{border-color:var(--chyba)}
.pole-mrizka{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pole-mrizka .cela{grid-column:1/-1}
@media (max-width:560px){.pole-mrizka{grid-template-columns:minmax(0,1fr)}}
.chyba-t{font-size:var(--p5);color:var(--chyba)}
.napoveda{font-size:var(--p6);line-height:1.45;color:var(--hloubka)}

/* ---------- stupnice stavu ---------- */
.stupnice{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;margin:0;padding:22px 0 0;--barva:var(--elox);--kde:0}
.stupnice[data-stav="1"],.stupnice[data-stav="2"]{--barva:var(--pozor)}
.stupnice[data-stav="3"]{--barva:var(--ok)}
.stupnice::before,.stupnice::after{content:"";position:absolute;top:5px;left:12.5%;right:12.5%;height:2px;background:var(--linka2)}
.stupnice::after{right:auto;width:calc(75% * var(--kde) / 3);background:var(--barva);transition:width .4s,background .4s}
.stupnice li{position:relative;text-align:center;font:500 var(--p6)/1.3 var(--f-mono);color:var(--hloubka);padding:0 2px}
.stupnice li::before{content:"";position:absolute;left:50%;top:-22px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--linka2);z-index:1;transition:background .3s,box-shadow .3s}
.stupnice li.hotovo{color:var(--text2)}
.stupnice li.hotovo::before{background:var(--barva)}
.stupnice li.ted{color:var(--rytina)}
.stupnice li.ted::before{background:var(--barva);box-shadow:0 0 0 3px var(--plech),0 0 0 4.5px var(--ryska)}
.stupnice small{display:block;color:var(--hloubka);font-size:10px;margin-top:2px}

/* ---------- stav, seznamy ---------- */
.stav{display:inline-flex;align-items:center;gap:7px;padding:3px 8px;border:1px solid var(--linka2);border-radius:var(--r1);font:500 var(--p6)/1.3 var(--f-mono);letter-spacing:.04em;color:var(--text2);white-space:nowrap}
.stav::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--elox)}
.stav.ok{border-color:var(--ok-slaba);background:var(--ok-slaba)}.stav.ok::before{background:var(--ok)}
.stav.pozor{border-color:var(--pozor-slaba);background:var(--pozor-slaba)}.stav.pozor::before{background:var(--pozor)}
.stav.chyba{border-color:var(--chyba-slaba);background:var(--chyba-slaba);color:var(--rytina)}.stav.chyba::before{background:var(--chyba)}
.stav.info::before{background:var(--info)}
.stav.ted{border-color:var(--ryska)}.stav.ted::before{background:var(--ryska)}
.tecky{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:var(--p5);line-height:1.45}
.tecky li{position:relative;padding-left:16px}
.tecky li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--elox)}
.tecky li.ok::before{background:var(--ok)}.tecky li.pozor::before{background:var(--pozor)}.tecky li.chyba::before{background:var(--chyba)}
.seznam{list-style:none;margin:0;padding:0;display:grid;gap:6px;line-height:1.5}
.seznam li{position:relative;padding-left:18px}
.seznam li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--elox)}

/* ---------- oznámení místo alert() ---------- */
.oznam{position:fixed;left:50%;bottom:20px;z-index:200;display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px);padding:11px 14px;border:1px solid var(--linka2);border-left:3px solid var(--elox);border-radius:var(--r2);background:var(--vrstva);color:var(--rytina);font-size:var(--p5);line-height:1.4;box-shadow:var(--stin);transform:translate(-50%,14px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility 0s .2s}
.oznam.vid{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;transition:opacity .2s,transform .2s}
.oznam.ok{border-left-color:var(--ok)}.oznam.pozor{border-left-color:var(--pozor)}.oznam.chyba{border-left-color:var(--chyba)}.oznam.info{border-left-color:var(--info)}
.oznam button{flex:none;border:0;background:none;padding:4px 0;color:var(--ryska);font:500 var(--p5)/1 var(--f-txt);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.potvrzeni{padding:14px;border:1px solid var(--ok);border-radius:var(--r2);background:var(--ok-slaba);font-size:var(--p5);color:var(--text2)}
.potvrzeni b{display:block;color:var(--rytina);font-size:var(--p4);margin-bottom:4px}
.potvrzeni pre{margin:10px 0 0;white-space:pre-wrap;font:400 var(--p6)/1.55 var(--f-mono);color:var(--text2);overflow-wrap:anywhere}
.ukazka{display:inline-flex;align-items:center;gap:6px;padding:2px 7px;border:1px dashed var(--linka2);border-radius:var(--r1);font:500 10px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--elox)}

/* ---------- kontakt, kopírování ---------- */
.kontakt-radky{display:grid;align-content:start;margin:0}
.kontakt-radek{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--linka)}
.kontakt-radek:first-child{border-top:1px solid var(--linka)}
.kontakt-radek dt{font:500 var(--p6)/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hloubka)}
.kontakt-radek dd{margin:0;font-size:var(--p3);color:var(--rytina);overflow-wrap:anywhere;min-width:0}
.kontakt-radek dd small{display:block;font-size:var(--p5);color:var(--elox)}
@media (max-width:480px){.kontakt-radek{grid-template-columns:minmax(0,1fr) auto}.kontakt-radek dt{grid-column:1/-1}}
.kopie-in{display:inline-flex;align-items:center;gap:6px;vertical-align:baseline;white-space:nowrap}
.kopie-in>span,.kopie-in>a{font-family:var(--f-mono);font-size:.93em;color:var(--rytina)}
.kopie-in button{display:inline-grid;place-items:center;width:28px;height:28px;margin:-6px 0;padding:0;border:1px solid var(--linka2);border-radius:var(--r1);background:var(--vrstva);color:var(--text2);cursor:pointer;vertical-align:middle}
.kopie-in button:hover{border-color:var(--elox);color:var(--rytina)}
.kopie-in .ik{width:14px;height:14px}

/* ---------- tabulka ---------- */
.tabulka{width:100%;border-collapse:collapse;font-size:var(--p5);line-height:1.5}
.tabulka th,.tabulka td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--linka)}
.tabulka th{font:500 var(--p6)/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hloubka);border-bottom-color:var(--linka2)}
.tabulka td{color:var(--text2)}
.tabulka td:first-child{color:var(--rytina)}
@media (max-width:640px){
  .tabulka thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabulka tr{display:block;padding:12px 0;border-bottom:1px solid var(--linka)}
  .tabulka td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:3px 0;border:0}
  .tabulka td::before{content:attr(data-k);font:500 var(--p6)/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hloubka)}
}

/* ---------- patička ---------- */
.pata{border-top:1px solid var(--linka);padding:28px 0 40px;margin-top:clamp(40px,6vw,80px)}
.pata-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:start}
.pata-logo{font:700 var(--p3)/1 var(--f-nad);color:var(--rytina);text-decoration:none}
.pata-firma{margin-top:10px;font:400 var(--p6)/1.7 var(--f-mono);color:var(--hloubka)}
.pata-kontakt{display:grid;gap:8px;justify-items:end;font:400 var(--p5)/1.4 var(--f-mono);color:var(--text2)}
.pata-kontakt a{color:var(--elox);text-decoration:none}
.pata-kontakt a:hover{color:var(--rytina)}
.pata-konec{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--linka);font:500 var(--p6)/1 var(--f-mono);letter-spacing:.12em;color:var(--hloubka)}
@media (max-width:640px){.pata-in{grid-template-columns:minmax(0,1fr)}.pata-kontakt{justify-items:start}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}