/* ===========================================================================
   KÓTY — výkresová vrstva Zaměřováku (ZKUŠEBNÍ, jen na náhledových stránkách)
   ---------------------------------------------------------------------------
   Pravidlo, které si z první verze odnášíme: uvnitř textového sloupce smí být
   jen to, co je součástí rozvržení. Všechno ostatní se kreslí do volného
   okraje vedle obsahu, kde nemá do čeho narazit.
   ========================================================================= */
:root{
  --kota:#1b5cf0;
  --kota-cara:rgba(27,92,240,.40);
  --kota-slaba:rgba(27,92,240,.18);
  --mrizka:rgba(27,92,240,.05);
  --mrizka-hruba:rgba(27,92,240,.09);
}
:root[data-tema="tma"]{
  --kota:#7fadff;
  --kota-cara:rgba(127,173,255,.38);
  --kota-slaba:rgba(127,173,255,.16);
  --mrizka:rgba(127,173,255,.05);
  --mrizka-hruba:rgba(127,173,255,.09);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="svetlo"]){
    --kota:#7fadff;
    --kota-cara:rgba(127,173,255,.38);
    --kota-slaba:rgba(127,173,255,.16);
    --mrizka:rgba(127,173,255,.05);
    --mrizka-hruba:rgba(127,173,255,.09);
  }
}

body{position:relative}
.kota-cislo{font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* --- 1) kóta na hraně hlavičky --------------------------------------------
   Hlavička má z-index 50 a překreslila by čáru vlastním okrajem, proto 51. */
.kota-hlava{position:fixed;z-index:51;height:0;border-top:1px solid var(--kota);
  pointer-events:none;opacity:0;transition:opacity .4s}
.kota-hlava.vidim{opacity:1}
.kota-hlava i{position:absolute;top:-7px;width:1px;height:15px;background:var(--kota);
  transform:rotate(45deg)}
.kota-hlava i:first-child{left:0}
.kota-hlava i:last-of-type{right:0}
.kota-hlava b{position:absolute;right:0;top:10px;font-size:.68rem;font-weight:700;
  color:var(--kota);opacity:0;transition:opacity .3s}
.kota-hlava.nahore b{opacity:1}

/* --- 2) svislé kóty sekcí v pravém okraji --------------------------------
   Vlevo jezdí metr, takže sekce se kótují vpravo. Popisek je vlevo od čáry,
   tím se celá kóta vejde do okraje i na nejužším okně, kde ještě svítí. */
.kota-vrstva{position:absolute;top:0;left:0;width:100%;height:0;
  pointer-events:none;z-index:5}
.kota-sekce{position:absolute;width:0;border-left:1px solid var(--kota-cara);
  pointer-events:none;opacity:0;transition:opacity .45s ease}
.kota-sekce.vidim{opacity:1}
.kota-sekce i{position:absolute;left:-7px;height:1px;width:15px;background:var(--kota);
  transform:rotate(45deg)}
.kota-sekce i:first-child{top:0}
.kota-sekce i:last-of-type{bottom:0}
.kota-sekce b{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:.66rem;font-weight:700;color:var(--kota);white-space:nowrap;line-height:1;
  text-align:right}

/* --- 3) nadpisy ------------------------------------------------------------
   Jen barva. Krátká závorka pod nadpisem tu byla, ale bez rozměru to není
   kóta, jen ozdoba — pryč. */
.hlavicka-str h1{color:var(--modra)}

/* --- 4) mřížka v heru ------------------------------------------------------ */
.mrizka-podklad{
  background-image:
    linear-gradient(var(--mrizka) 1px,transparent 1px),
    linear-gradient(90deg,var(--mrizka) 1px,transparent 1px),
    linear-gradient(var(--mrizka-hruba) 1px,transparent 1px),
    linear-gradient(90deg,var(--mrizka-hruba) 1px,transparent 1px);
  background-size:20px 20px,20px 20px,100px 100px,100px 100px;
  background-position:-1px -1px;
}

/* --- 5) registrační rohy u videa ------------------------------------------- */
.hero-video{overflow:visible}
.reg-roh{position:absolute;width:16px;height:16px;border:1px solid var(--kota);
  pointer-events:none}
.reg-roh.lh{left:-9px;top:-9px;border-right:0;border-bottom:0}
.reg-roh.ph{right:-9px;top:-9px;border-left:0;border-bottom:0}
.reg-roh.ld{left:-9px;bottom:-9px;border-right:0;border-top:0}
.reg-roh.pd{right:-9px;bottom:-9px;border-left:0;border-top:0}

/* --- 6) vynášecí čáry u čísel na úvodní stránce ---------------------------- */
.cislo{position:relative;padding-left:14px}
.cislo::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:var(--kota-cara)}
.cislo::after{content:"";position:absolute;left:-4px;top:6px;width:9px;height:1px;
  background:var(--kota)}

/* --- 7) kóta karty při najetí ----------------------------------------------
   Pod kartou se ukáže její šířka. Popisek je v obláčku s vlastním podkladem,
   aby byl čitelný i tam, kde pod kartou začíná další řada mřížky. */
.karta{position:relative}
.karta::before{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:7px;
  border:1px solid var(--kota-cara);border-top:0;
  opacity:0;transition:opacity .2s;pointer-events:none}
.karta::after{
  content:attr(data-sirka);position:absolute;left:50%;transform:translateX(-50%);
  bottom:-33px;z-index:6;white-space:nowrap;line-height:1;
  font-size:.66rem;font-weight:700;color:var(--kota);font-variant-numeric:tabular-nums;
  letter-spacing:.06em;background:var(--plocha);border:1px solid var(--kota-slaba);
  border-radius:5px;padding:4px 8px;
  opacity:0;transition:opacity .2s;pointer-events:none}
.karta:hover::before,.karta:hover::after{opacity:1}
.karta[data-sirka=""]::before,.karta[data-sirka=""]::after{content:none}

/* --- 8) měřítko vpravo dole ------------------------------------------------ */
.meritko{position:fixed;right:24px;bottom:18px;z-index:31;pointer-events:none;
  text-align:right;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slaby);background:var(--pozadi);padding:4px 0 0 10px}
.meritko .pruh{display:block;width:100px;height:7px;margin:0 0 5px auto;
  border:1px solid var(--kota-cara);border-top:0;
  background:linear-gradient(90deg,var(--kota-slaba) 50%,transparent 50%)}

/* --- 9) lišta náhledu ------------------------------------------------------ */
.nahled-listva{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:60;
  display:flex;gap:4px;align-items:center;padding:6px;border-radius:99px;
  background:var(--plocha);border:1px solid var(--linka);box-shadow:var(--stin)}
.nahled-listva span{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slaby);padding:0 10px 0 8px}
.nahled-listva a{font-size:.85rem;padding:6px 12px;border-radius:99px;color:var(--text)}
.nahled-listva a:hover{background:var(--pozadi2);text-decoration:none}
.nahled-listva a.tady{background:var(--modra);color:var(--na-modre)}
@media (max-width:760px){ .nahled-listva{display:none} }

/* --- kde se kóty vypínají -------------------------------------------------- */
@media (max-width:1320px){ .kota-vrstva,.kota-hlava,.meritko{display:none} }
/* Při systémovém omezení animací jen vypneme prolínání. Metr ani kóty se
   neschovávají — nehýbou se samy od sebe, jedou podle rolování. */
@media (prefers-reduced-motion: reduce){
  .kota-sekce,.kota-hlava,.kota-hloubka,.kota-hloubka .bezec{transition:none}
}

/* ===========================================================================
   ÚROVEŇ 4 — PLÁN
   Všechno navíc oproti technickému listu. Platí jen pro data-koty="4".
   ========================================================================= */

/* --- mřížka přes celou stránku (pevná, stránka po ní jede) ----------------- */
body[data-koty="4"]{background-attachment:fixed}
body[data-koty="4"] .hero{background:transparent}
body[data-koty="4"] .sekce:not(.tm){background:transparent}
body[data-koty="4"] .hlavicka-str{background:transparent}

/* --- rohové značky sekcí --------------------------------------------------- */
body[data-koty="4"] .sekce::before,body[data-koty="4"] .sekce::after,
body[data-koty="4"] .hlavicka-str::before,body[data-koty="4"] .hlavicka-str::after{
  content:"";position:absolute;width:11px;height:11px;border:1px solid var(--kota-slaba);
  pointer-events:none}
body[data-koty="4"] .sekce::before,body[data-koty="4"] .hlavicka-str::before{
  left:14px;top:14px;border-right:0;border-bottom:0}
body[data-koty="4"] .sekce::after,body[data-koty="4"] .hlavicka-str::after{
  right:14px;top:14px;border-left:0;border-bottom:0}
.sekce,.hlavicka-str{position:relative}

/* --- jezdící metr u levého okraje (od úrovně 3) ----------------------------
   Nivelační lať: dílky po 28 px, oboustranná šipka jede podle rolování,
   u ní hloubka a dole celková výška stránky. */
.kota-hloubka{position:fixed;left:20px;top:116px;bottom:56px;width:78px;z-index:30;
  pointer-events:none;opacity:0;transition:opacity .35s}
.kota-hloubka.vidim{opacity:1}
.kota-hloubka .cara{position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--kota-slaba)}
.kota-hloubka .dilky{position:absolute;left:4px;top:0;bottom:0;width:5px;
  background-image:repeating-linear-gradient(to bottom,var(--kota-slaba) 0 1px,transparent 1px 28px)}

.kota-hloubka .konec{position:absolute;left:1px;width:15px;height:1px;background:var(--kota)}
.kota-hloubka .konec.h{top:0}
.kota-hloubka .konec.d{bottom:0}
.kota-hloubka .bezec{position:absolute;left:0;top:0;height:0;will-change:transform}
.kota-hloubka .bezec::before{content:"";position:absolute;left:2px;top:-3px;
  border:3px solid transparent;border-top-color:var(--kota);border-bottom:0}
.kota-hloubka .bezec::after{content:"";position:absolute;left:2px;top:0;
  border:3px solid transparent;border-bottom-color:var(--kota);border-top:0}
.kota-hloubka .hodnota{position:absolute;left:20px;top:-9px;font-size:.7rem;font-weight:800;
  color:var(--kota);background:var(--pozadi);padding:1px 6px;border-radius:4px;white-space:nowrap}
.kota-hloubka .celkem{position:absolute;left:20px;bottom:-7px;font-size:.63rem;
  color:var(--slaby);white-space:nowrap}

/* --- nitkový kříž s odečtem ------------------------------------------------ */
.kriz{position:fixed;inset:0;z-index:28;pointer-events:none;opacity:0;transition:opacity .3s}
.kriz.vidim{opacity:1}
.kriz span{position:absolute;background:var(--kota-slaba)}
.kriz .vodo{left:0;right:0;height:1px}
.kriz .svis{top:0;bottom:0;width:1px}
.odecet{position:fixed;z-index:29;pointer-events:none;font-size:.64rem;font-weight:700;
  color:var(--kota);background:var(--plocha);border:1px solid var(--kota-slaba);
  border-radius:5px;padding:3px 7px;opacity:0;transition:opacity .3s}
.odecet.vidim{opacity:1}

/* --- štítek detailu u videa ------------------------------------------------ */
.detail-stitek{position:absolute;left:-9px;top:-30px;font-size:.62rem;font-weight:800;
  letter-spacing:.16em;color:var(--kota);text-transform:uppercase}

/* --- rohové razítko výkresu ------------------------------------------------ */
.razitko{max-width:1140px;margin:0 auto 70px;padding:0 20px}
.razitko-ram{border:1px solid var(--linka);border-radius:var(--r-s);overflow:hidden;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;background:var(--plocha)}
.razitko-ram div{padding:14px 16px;border-left:1px solid var(--linka)}
.razitko-ram div:first-child{border-left:0}
.razitko-ram dt{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slaby);margin:0 0 5px}
.razitko-ram dd{margin:0;font-size:.92rem;font-weight:700;color:var(--inkoust);
  font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .razitko-ram{grid-template-columns:1fr 1fr}
  .razitko-ram div{border-left:0;border-top:1px solid var(--linka)}
}

@media (max-width:1320px){ .kota-hloubka,.kriz,.odecet{display:none} }
@media (prefers-reduced-motion: reduce){ .kriz,.odecet{display:none} }