/* ==========================================================================
   Kioskbase — jediný štýl pre celý web (SK aj EN)

   Prečo jeden súbor: web nemá build krok, takže každý ďalší .css je ďalšie
   sieťové kolo navyše. Pri tejto veľkosti sa celý štýl zmestí do prvého
   paketu a stránka sa vykreslí naraz.

   Motív je HĹBKA: hore svetlo (hladina), dole tma (dno). Odtiaľ aj názov
   aplikácie — kotva drží zariadenie na mieste.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Farby
   Hodnoty sú prevzaté z existujúcej identity Kotvy, nevymýšľajú sa nanovo.
   Svetlá téma je východzia (definovaná na holom :root), tmavá len prepisuje
   premenné — inak by pri systéme bez preferencie zostali farby nedefinované.
   -------------------------------------------------------------------------- */
:root {
  /* Stálice — rovnaké v oboch témach, lebo hlbina je vždy tmavá. */
  --hlbka-900: #06101d;
  --hlbka-800: #0b1a2c;
  --hlbka-700: #12293f;
  --ocel-100: #eaf1fa;
  --ocel-300: #a8bdd4;
  --mosadz: #e0a94f;
  --modra: #58a6ff;

  /* Svetlá téma */
  --pozadie: #f2f6fb;
  --pozadie-karta: #ffffff;
  --pozadie-vyryv: #e7eef7;
  --text: #06101d;
  --text-tlmeny: #46617f;
  --linka: #d2dfec;
  --linka-vyrazna: #b8ccdf;
  /* Mosadz na bielom nemá dosť kontrastu, tmavší odtieň má 4.6:1 na --pozadie. */
  --akcent: #8a5d0c;
  --akcent-plocha: #e0a94f;
  --odkaz: #10538f;
  --tien: 0 1px 2px rgba(6, 16, 29, .06), 0 8px 24px -12px rgba(6, 16, 29, .18);

  --sirka: 1140px;
  --radius: 3px; /* takmer ostré hrany — technický nástroj, nie hračka */
  --pismo-nadpis: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --pismo-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pismo-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pozadie: #06101d;
    --pozadie-karta: #0b1a2c;
    --pozadie-vyryv: #0e2135;
    --text: #eaf1fa;
    --text-tlmeny: #a8bdd4;
    --linka: rgba(168, 189, 212, .16);
    --linka-vyrazna: rgba(168, 189, 212, .3);
    --akcent: #e0a94f;
    --akcent-plocha: #e0a94f;
    --odkaz: #58a6ff;
    --tien: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .7);
  }
}

/* --------------------------------------------------------------------------
   2. Základ
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Kotva ukazuje čísla — tabuľkové číslice, aby sa v tabuľkách nehýbali. */
  font-variant-numeric: tabular-nums;
}

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

body {
  margin: 0;
  background: var(--pozadie);
  color: var(--text);
  font-family: var(--pismo-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--odkaz); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

/* Viditeľné zameranie klávesnicou je podmienka prístupnosti, nie ozdoba. */
:focus-visible {
  outline: 2px solid var(--akcent-plocha);
  outline-offset: 3px;
  border-radius: 2px;
}

strong { font-weight: 600; }

.mono {
  font-family: var(--pismo-mono);
  font-size: .92em;
  letter-spacing: -.02em;
}

.preskoc {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hlbka-800);
  color: var(--ocel-100);
  padding: .7rem 1.1rem;
  z-index: 100;
}
.preskoc:focus { left: .5rem; top: .5rem; }

.obal {
  width: 100%;
  max-width: var(--sirka);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.uzsi { max-width: 74ch; }

/* --------------------------------------------------------------------------
   3. Hlavička
   Navigácia je <details>, aby mobilné menu fungovalo bez JavaScriptu —
   web nesmie prestať fungovať, keď sa skript nestiahne.
   -------------------------------------------------------------------------- */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--pozadie) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linka);
  transition: background-color .25s ease, box-shadow .25s ease;
}
/* Po odscrollovaní sa hlavička pritmaví a dostane tieň — je jasné, že pláva
   nad obsahom. Triedu prepína skript; bez neho hlavička len ostane svetlejšia. */
.hlavicka.zosunuta {
  background: color-mix(in srgb, var(--pozadie) 97%, transparent);
  box-shadow: var(--tien);
}

.hlavicka-vnutro {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}

.znacka {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--pismo-mono);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.znacka svg { display: block; color: var(--akcent-plocha); }
.znacka b { font-weight: 600; }
.znacka span { color: var(--text-tlmeny); font-weight: 400; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.6rem);
}

.nav a {
  color: var(--text-tlmeny);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); border-bottom-color: var(--akcent-plocha); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--akcent-plocha); }

.jazyk {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--linka-vyrazna);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--pismo-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  line-height: 1;
}
/* ⚠️ Odkaz v prepínači dedí pravidlá `.nav a` (padding, spodná linka na
   hover) — preto tu má VŠETKO vlastné hodnoty s rovnakou špecifickosťou
   cez :is(). Bez toho boli SK a EN políčka rôzne vysoké (nahlásené
   29. 8. 2026). */
.nav .jazyk :is(a, span) {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: .42rem .6rem;
  border: 0;
  text-decoration: none;
  color: var(--text-tlmeny);
}
.nav .jazyk a:hover { color: var(--text); border: 0; background: color-mix(in srgb, var(--text) 8%, transparent); }
/* Aktívny jazyk: tmavý text na mosadzi. Selektor musí prebiť
   `.nav .jazyk :is(a, span)` vyššie — slabší písal na mosadz biely text
   (nahlásené 29. 8. 2026). */
.nav .jazyk [aria-current], .jazyk [aria-current] {
  background: var(--akcent-plocha);
  color: #06101d;
  font-weight: 700;
}

/* ⛔ NAVIGÁCIA NESMIE BYŤ VNÚTRI ZAVRETÉHO <details>.
   Prvá verzia mala <details class="menu"> s `display: contents` — lenže
   zavretý details svoj obsah SKRYJE bez ohľadu na CSS, takže na desktope
   navigácia nebola vôbec (nahlásené 29. 8. 2026: „hore mi chýba bežná
   navigácia"). Menu je teraz checkbox + label: funguje bez JavaScriptu,
   skript len dopĺňa aria-expanded a zatváranie Escape-om. */
.menu-prepinac { display: none; }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid var(--linka-vyrazna);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  background: transparent;
}
.burger svg { display: block; }
/* Tri čiarky sa preklopia na ×: krajné sa otočia, stredná zmizne. */
.burger line { transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
.menu-prepinac:checked ~ .burger .b1 { transform: translateY(5px) rotate(45deg); }
.menu-prepinac:checked ~ .burger .b2 { opacity: 0; }
.menu-prepinac:checked ~ .burger .b3 { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 800px) {
  .burger { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--pozadie-karta);
    border-block: 1px solid var(--linka);
    padding: .5rem clamp(1.15rem, 4vw, 2.5rem) 1rem;
    box-shadow: var(--tien);
  }
  .menu-prepinac:checked ~ .nav { display: flex; }
  .nav a { width: 100%; padding: .7rem 0; border-bottom: 1px solid var(--linka); }
  .nav a:hover { border-bottom-color: var(--linka); }
  .jazyk { margin-top: .8rem; }
}

/* --------------------------------------------------------------------------
   4. Hlbina — tmavý pás
   Tento pás je v oboch témach tmavý. Je to nosný obraz značky: hladina hore,
   dno dole. Čiary sú vykreslené gradientom, nie obrázkom — nič sa nesťahuje.
   -------------------------------------------------------------------------- */
.hlbina {
  position: relative;
  background: linear-gradient(178deg, var(--hlbka-700) 0%, var(--hlbka-800) 42%, var(--hlbka-900) 100%);
  color: var(--ocel-100);
  overflow: hidden;
  border-bottom: 1px solid rgba(224, 169, 79, .22);
}

/* Ryhy „ako na hĺbkomere" tu boli a sú PREČ: čitateľ v nich videl riadky
   zo zošita, nie hĺbkomer (spätná väzba 29. 8. 2026). Dekorácia, ktorej zámer
   treba vysvetľovať, nefunguje — hĺbku nesie gradient s planktónom sám. */

.hlbina .obal { position: relative; z-index: 1; }
.hlbina h1, .hlbina h2, .hlbina h3 { color: #fff; }
.hlbina p { color: var(--ocel-300); }
.hlbina a { color: var(--modra); }

/* --------------------------------------------------------------------------
   5. Úvodný blok
   -------------------------------------------------------------------------- */
.uvod { padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem); }

.uvod-mriezka {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 940px) {
  .uvod-mriezka { grid-template-columns: minmax(0, 1fr); }
}

.stitok {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--pismo-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mosadz);
  border: 1px solid rgba(224, 169, 79, .35);
  border-radius: var(--radius);
  padding: .3rem .6rem;
  margin-bottom: 1.4rem;
}

.uvod h1 { max-width: 15ch; }

.perex {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  max-width: 52ch;
  margin-bottom: 2rem;
}

.tlacidla { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.tl {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .97rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.tl:hover { transform: translateY(-1px); }
.tl-hlavne { background: var(--akcent-plocha); color: var(--hlbka-900); }
.tl-hlavne:hover { background: #edbb66; }
/* V tmavom páse platí pre odkazy modrá (.hlbina a), a tá je špecifickejšia než
   samotné .tl-hlavne — nápis na mosadzi by preto zmodral a stratil kontrast. */
.hlbina .tl-hlavne, .hlbina .tl-hlavne:hover { color: var(--hlbka-900); }
.tl-vedlajsie {
  border-color: var(--linka-vyrazna);
  color: inherit;
  background: transparent;
}
.hlbina .tl-vedlajsie { border-color: rgba(168, 189, 212, .35); color: var(--ocel-100); }
.tl-vedlajsie:hover { border-color: var(--akcent-plocha); }

.pod-tlacidlami {
  margin-top: 1.2rem;
  font-size: .87rem;
  color: var(--ocel-300);
  font-family: var(--pismo-mono);
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   6. Karta zariadenia — ukážka toho, čo správca naozaj vidí
   Je to obyčajná definičná tabuľka, nie obrázok: dá sa prečítať čítačkou,
   preloží sa a nič sa nesťahuje.
   -------------------------------------------------------------------------- */
.zariadenie {
  background: rgba(6, 16, 29, .55);
  border: 1px solid rgba(168, 189, 212, .2);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
  overflow: hidden;
}

.zariadenie-hlava {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(168, 189, 212, .16);
  background: rgba(18, 41, 63, .6);
  font-family: var(--pismo-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ocel-100);
}

.dioda {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
  flex: none;
}

.zariadenie-hlava .stav { margin-left: auto; color: var(--ocel-300); font-size: .72rem; }

.udaje {
  margin: 0;
  padding: .35rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
}
.udaje dt,
.udaje dd {
  padding: .32rem 1rem;
  font-family: var(--pismo-mono);
  font-size: .78rem;
  margin: 0;
  border-bottom: 1px solid rgba(168, 189, 212, .07);
}
.udaje dt { color: var(--ocel-300); letter-spacing: .04em; }
.udaje dd {
  color: var(--ocel-100);
  text-align: right;
  /* Bez `min-width: 0` má bunka mriežky minimálnu šírku svojho obsahu a dlhá
     hodnota (napr. „SOTEN K70 · Android 13") roztlačí celú stránku do šírky. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.udaje dt:nth-last-of-type(1), .udaje dd:nth-last-of-type(1) { border-bottom: 0; }
.udaje .dobre { color: #6ee7a8; }
.udaje .pozor { color: var(--mosadz); }

/* --------------------------------------------------------------------------
   7. Sekcie
   -------------------------------------------------------------------------- */
.sekcia { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sekcia + .sekcia { border-top: 1px solid var(--linka); }

.nadpis-sekcie {
  font-family: var(--pismo-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--akcent);
  margin-bottom: .9rem;
}

.uvodna-veta {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--text-tlmeny);
  max-width: 60ch;
}

/* Mriežka funkcií — ľavý mosadzný prah namiesto rámčeka dookola. */
.mriezka {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  margin-top: 2.4rem;
}

.polozka {
  border-left: 2px solid var(--linka-vyrazna);
  padding-left: 1.1rem;
}
.polozka h3 { margin-bottom: .4rem; }
.polozka p { color: var(--text-tlmeny); font-size: .97rem; margin-bottom: 0; }
.polozka:hover { border-left-color: var(--akcent-plocha); }

/* Vyryté pole pre dôležitý výpočet alebo poznámku. */
.vyryv {
  background: var(--pozadie-vyryv);
  border: 1px solid var(--linka);
  border-left: 3px solid var(--akcent-plocha);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}

.vypocet {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem 1rem;
  font-family: var(--pismo-mono);
  font-size: .88rem;
  margin: 0;
}
.vypocet dt { color: var(--text-tlmeny); padding: .3rem 0; }
.vypocet dd { margin: 0; text-align: right; padding: .3rem 0; }
.vypocet .sucet {
  border-top: 1px solid var(--linka-vyrazna);
  margin-top: .3rem;
  padding-top: .55rem;
  font-weight: 600;
  color: var(--text);
}
.vypocet dd.sucet { color: var(--akcent); }

/* --------------------------------------------------------------------------
   8. Tabuľky
   -------------------------------------------------------------------------- */
.tabulka-obal { overflow-x: auto; margin-top: 2rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 480px;
}
caption {
  text-align: left;
  color: var(--text-tlmeny);
  font-size: .87rem;
  padding-bottom: .7rem;
}
th, td {
  text-align: left;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--linka);
}
thead th {
  font-family: var(--pismo-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tlmeny);
  font-weight: 500;
  border-bottom-color: var(--linka-vyrazna);
}
td.cislo, th.cislo { text-align: right; font-family: var(--pismo-mono); }
tbody tr:hover { background: var(--pozadie-vyryv); }
.zvyraznene { color: var(--akcent); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Zoznamy
   -------------------------------------------------------------------------- */
.zoznam-odrazky { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.zoznam-odrazky li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .7rem;
  color: var(--text-tlmeny);
}
.zoznam-odrazky li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 2px;
  background: var(--akcent-plocha);
}
.zoznam-odrazky strong { color: var(--text); }

/* Kroky nasadenia — číslované, mono číslo v mosadzi. */
.kroky {
  list-style: none;
  counter-reset: krok;
  padding: 0;
  margin: 2.2rem 0 0;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.kroky li { counter-increment: krok; }
.kroky li::before {
  content: counter(krok, decimal-leading-zero);
  display: block;
  font-family: var(--pismo-mono);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--akcent);
  border-bottom: 1px solid var(--linka-vyrazna);
  padding-bottom: .5rem;
  margin-bottom: .7rem;
}
.kroky h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.kroky p { color: var(--text-tlmeny); font-size: .94rem; margin: 0; }

/* --------------------------------------------------------------------------
   10. Otázky a odpovede
   Odpovede sú vždy viditeľné, nie schované v rozbaľovačke: model aj čitateľ
   majú vetu prečítať bez kliknutia.
   -------------------------------------------------------------------------- */
.otazka { margin-top: 2.6rem; scroll-margin-top: 90px; }
.otazka:first-of-type { margin-top: 1.8rem; }
.otazka h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-bottom: .6rem; }
.otazka > p { max-width: 72ch; }
.otazka > p:first-of-type { color: var(--text); }
.otazka p + p { color: var(--text-tlmeny); font-size: .96rem; }

.obsah-stranky {
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  background: var(--pozadie-karta);
}
.obsah-stranky ol { margin: 0; padding-left: 1.2rem; }
.obsah-stranky li { margin-bottom: .35rem; font-size: .95rem; }

/* --------------------------------------------------------------------------
   11. Záverečná výzva a pätička
   -------------------------------------------------------------------------- */
.zaver { padding-block: clamp(3rem, 7vw, 5rem); }
.zaver h2 { max-width: 18ch; }

.paticka {
  border-top: 1px solid var(--linka);
  padding-block: 2.5rem 3rem;
  font-size: .9rem;
  color: var(--text-tlmeny);
}
.paticka-mriezka {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.paticka h4 {
  font-family: var(--pismo-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: .8rem;
}
.paticka ul { list-style: none; padding: 0; margin: 0; }
.paticka li { margin-bottom: .45rem; }
.paticka a { color: var(--text-tlmeny); text-decoration: none; }
.paticka a:hover { color: var(--text); text-decoration: underline; }
.paticka-spodok {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linka);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-family: var(--pismo-mono);
  font-size: .76rem;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   12. Kalkulačka na stránke s cenníkom
   Bez JavaScriptu ostane viditeľná tabuľka pásiem — číslo si čitateľ nájde aj
   tak. Skript len ušetrí počítanie.
   -------------------------------------------------------------------------- */
.kalkulacka {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: center;
}
.kalkulacka label {
  display: block;
  font-family: var(--pismo-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tlmeny);
  margin-bottom: .5rem;
}
.kalkulacka input {
  width: 100%;
  max-width: 200px;
  font-family: var(--pismo-mono);
  font-size: 1.3rem;
  padding: .55rem .7rem;
  color: var(--text);
  background: var(--pozadie-karta);
  border: 1px solid var(--linka-vyrazna);
  border-radius: var(--radius);
}
.vysledok { font-family: var(--pismo-mono); }
.vysledok .velke {
  display: block;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 600;
  color: var(--akcent);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.vysledok .drobne { font-size: .85rem; color: var(--text-tlmeny); }

/* Zabalenie riadku s dvojicou hodnôt (mesačne / ročne). */
.dvojica {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 1.4rem;
}

/* --------------------------------------------------------------------------
   13. Tlač — občas si to niekto vytlačí ako podklad pre šéfa.
   -------------------------------------------------------------------------- */
@media print {
  .hlavicka, .paticka, .tlacidla, .preskoc { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hlbina { background: #fff; color: #000; border-bottom: 1px solid #000; }
  .hlbina h1, .hlbina p { color: #000; }
  a { text-decoration: none; color: #000; }
}

/* ==========================================================================
   14. Živá vrstva — pohyb, ktorý niečo hovorí

   Pravidlo pre celú sekciu: hýbe sa len to, čo vysvetľuje produkt. Nosný obraz
   je KOTVA — tablet najprv pluje, potom sa spustí kotva a zariadenie zacvakne
   na jednu adresu a prestane sa hýbať. To je presne kiosk režim, len bez odseku
   textu.

   ⛔ Všetko musí prežiť `prefers-reduced-motion: reduce`. Pri ňom sa nehýbe nič
   a obsah zostáva v koncovom stave — nie v tom počiatočnom, inak by zmizol.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 Príchod úvodu
   Nadpis priletí zhora, text a tlačidlá zdola. Prebehne raz, do 1,5 s, a je
   ticho — vstupná animácia, ktorá sa opakuje, je po treťom načítaní otrava.
   -------------------------------------------------------------------------- */
@keyframes prilet-zhora {
  0% { opacity: 0; transform: translateY(-70px); }
  65% { opacity: 1; transform: translateY(5px); }
  82% { transform: translateY(-2px); }
  100% { opacity: 1; transform: none; }
}
@keyframes prilet-zdola {
  0% { opacity: 0; transform: translateY(70px); }
  65% { opacity: 1; transform: translateY(-5px); }
  82% { transform: translateY(2px); }
  100% { opacity: 1; transform: none; }
}

.uvod .stitok { animation: prilet-zhora .8s cubic-bezier(.22, 1, .36, 1) both; }
.uvod h1 { animation: prilet-zhora .9s cubic-bezier(.22, 1, .36, 1) .08s both; }
.uvod .perex { animation: prilet-zdola .9s cubic-bezier(.22, 1, .36, 1) .2s both; }
.uvod .tlacidla { animation: prilet-zdola .9s cubic-bezier(.22, 1, .36, 1) .3s both; }
.uvod .pod-tlacidlami { animation: prilet-zdola .9s cubic-bezier(.22, 1, .36, 1) .4s both; }
.uvod .scena { animation: prilet-zdola 1s cubic-bezier(.22, 1, .36, 1) .35s both; }

/* Krátke mosadzné podčiarknutie sa dokreslí pod nadpisom. */
.uvod h1 { position: relative; padding-bottom: .28em; }
.uvod h1::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 5.5rem;
  background: var(--akcent-plocha);
  /* Rozťahuje sa transformom, nie šírkou: šírka núti prehliadač prepočítať
     rozloženie pri každom snímku, transform beží na kompozítore.

     Výplň je zámerne `backwards`, nie `forwards`: pred oneskorením drží
     stiahnutý stav a po dobehnutí sa vráti k vlastnému štýlu prvku — teda
     k viditeľnej čiare. Keby sa animácia z akéhokoľvek dôvodu nespustila,
     čiara tam JE. Pri `forwards` by ju jedna zlyhaná animácia skryla navždy. */
  transform-origin: left center;
  animation: dokresli .8s cubic-bezier(.22, 1, .36, 1) 1s backwards;
}
@keyframes dokresli { from { transform: scaleX(0); } }

/* Svetelný prebeh po nadpise tu bol a je PREČ. Rušil (spätná väzba
   29. 8. 2026: „biela sranda letí zľava doprava a potom stojí v rohu") —
   a v pokojovom stave mu biely pás naozaj PARKOVAL vyľava od nadpisu, lebo
   animácia nemala koncový stav v neviditeľne a prvok nebol orezaný.
   Ak sem raz niečo podobné pôjde, musí končiť na opacity: 0 s `forwards`
   a rodič musí mať overflow: hidden. */

/* Svetlo prebehne aj po hlavnom tlačidle — jediná vec v úvode, ktorá sa hýbe
   stále, a to pomaly. Má priťahovať oko tam, kde je ďalší krok. */
.tl-hlavne { position: relative; overflow: hidden; }
.tl-hlavne::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: tlacidlo-lesk 4.2s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes tlacidlo-lesk { 0% { left: -60%; } 35%, 100% { left: 130%; } }

/* --------------------------------------------------------------------------
   14.2 Odhalenie pri scrollovaní
   IntersectionObserver pridá .viditelne a prvok prestane sledovať — sledovať
   desiatky prvkov navždy je zbytočná práca pri každom scrollnutí.
   -------------------------------------------------------------------------- */
.odhal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  /* Krátko: pri scrolle je odhalenie interpunkcia, nie divadlo. Dlhších 500 ms
     spôsobovalo, že sa vedľajšie prvky ešte len rozbiehali, keď už mali stáť. */
  transition: opacity .28s ease-out, transform .28s ease-out;
  /* ⛔ ŽIADNE delay v CSS. Poradie nabiehania určuje skript podľa polohy
     v dokumente — pevné `--poradie` z HTML spôsobovalo, že spodný prvok
     nabehol skôr než ten nad ním (spätná väzba 29. 8. 2026). */
}
.odhal.viditelne { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   14.3 Scéna: prehliadač — lano — tablet
   Zvislé usporiadanie aj na veľkej obrazovke. Príkaz padá zhora nadol a to isté
   rozloženie funguje na mobile bez druhej sady pravidiel.
   -------------------------------------------------------------------------- */
.scena {
  display: grid;
  /* `minmax(0, …)`, nie `1fr`: položka mriežky sa inak nezmenší pod šírku
     svojho obsahu a široká karta zariadenia roztlačí celú stránku do šírky. */
  grid-template-columns: minmax(0, 1fr);
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
  perspective: 1200px;
}

/* ── Okno prehliadača ─────────────────────────────────────────────────────
   Nesie odkaz „všetko sa robí odtiaľto": je to obyčajná webová stránka. */
.okno {
  min-width: 0;
  background: rgba(6, 16, 29, .74);
  border: 1px solid rgba(168, 189, 212, .22);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .95);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out;
}

.okno-lista {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  background: rgba(18, 41, 63, .9);
  border-bottom: 1px solid rgba(168, 189, 212, .16);
}
.bodky { display: inline-flex; gap: .3rem; flex: none; }
.bodky i { width: 8px; height: 8px; border-radius: 50%; background: rgba(168, 189, 212, .28); }
.okno-adresa {
  flex: 1;
  min-width: 0;
  font-size: .66rem;
  color: var(--ocel-300);
  background: rgba(6, 16, 29, .65);
  border-radius: 3px;
  padding: .2rem .5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.okno-znacka {
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mosadz);
  flex: none;
}

.okno-telo { padding: .8rem .9rem .9rem; }

.okno-nadpis {
  font-family: var(--pismo-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ocel-100);
  margin: 0 0 .6rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}

/* Výpis odpovedí. Pevná výška — pribúdajúce riadky nesmú posúvať stránku. */
.vypis {
  list-style: none;
  margin: .7rem 0 0;
  padding: .55rem .6rem;
  height: 82px;
  overflow: hidden;
  background: rgba(6, 16, 29, .72);
  border: 1px solid rgba(168, 189, 212, .12);
  border-radius: 3px;
  font-family: var(--pismo-mono);
  font-size: .68rem;
  line-height: 1.65;
  color: var(--ocel-300);
}
.vypis li {
  display: flex;
  gap: .4rem;
  opacity: 0;
  transform: translateY(5px);
  animation: riadok-hore .35s ease var(--ld, 0s) forwards;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes riadok-hore { to { opacity: 1; transform: none; } }
.vypis .znak { color: var(--mosadz); flex: none; }
.vypis li > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vypis .ok { color: #6ee7a8; font-weight: 500; }
.vypis .kurzor-znak { color: var(--modra); animation: blikanie 1s steps(2) infinite; }
@keyframes blikanie { 50% { opacity: 0; } }

/* Bodky režimov — dajú sa aj kliknúť, takže sú to skutočné tlačidlá. */
/* Prepínače režimov. Boli to bodky bez textu — „tie malé bodky som oklikal
   ale robí to asi to isté" (spätná väzba 29. 8. 2026). Bez pomenovania sa
   režimy nedajú rozlíšiť, preto každý nesie svoje meno. */
.rezimy {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .3rem;
  padding-top: .8rem;
  /* Zalamovanie, nie skrolovanie: šiesty prepínač v odrezanom páse by nebolo
     vidieť a skryté ovládanie je presný opak toho, čo tu chceme. */
}
.rezim-bodka {
  flex: 0 0 auto;
  border: 1px solid rgba(168, 189, 212, .25);
  padding: .28rem .55rem;
  border-radius: 999px;
  background: transparent;
  color: var(--ocel-300);
  font-family: var(--pismo-mono);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s;
}
.rezim-bodka:hover { color: var(--ocel-100); border-color: rgba(168, 189, 212, .5); }
.rezim-bodka[aria-current="true"] {
  background: var(--akcent-plocha);
  border-color: var(--akcent-plocha);
  color: #06101d;
  font-weight: 700;
}

/* ── Lano medzi prehliadačom a tabletom ───────────────────────────────────
   Kotva potrebuje lano. Kreslí sa `stroke-dashoffset`-om, dĺžku doň doplní
   skript z `getTotalLength()` — natvrdo zapísané číslo by pri zmene tvaru
   ticho prestalo sedieť. */
.lano { position: relative; height: 104px; }
.lano-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lano-cesta {
  fill: none;
  stroke: rgba(168, 189, 212, .3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--dlzka, 200);
  stroke-dashoffset: var(--dlzka, 200);
}
/* Po zakotvení lano ostáva natiahnuté — drží zariadenie. */
.scena.zakotvene .lano-cesta { stroke-dashoffset: 0; stroke: rgba(224, 169, 79, .45); }
.scena.rezim-ukotvenie .lano-cesta { animation: lano-kresli 1.2s ease-out .25s forwards; }
@keyframes lano-kresli { to { stroke-dashoffset: 0; } }

.kotva-ikona {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 4px;
  color: var(--mosadz);
  opacity: 0;
  transform: translate(-50%, 0);
  filter: drop-shadow(0 0 8px rgba(224, 169, 79, .45));
}
.kotva-ikona svg { display: block; }
.scena.zakotvene .kotva-ikona { opacity: 1; transform: translate(-50%, 66px); }
.scena.rezim-ukotvenie .kotva-ikona { animation: kotva-pad 1.5s cubic-bezier(.22, 1, .36, 1) .5s forwards; }
@keyframes kotva-pad {
  0% { opacity: 0; transform: translate(-50%, -6px) rotate(-10deg) scale(.85); }
  25% { opacity: 1; }
  70% { transform: translate(-50%, 74px) rotate(4deg) scale(1); }
  85% { transform: translate(-50%, 62px) rotate(-2deg); }
  100% { opacity: 1; transform: translate(-50%, 66px) rotate(0) scale(1); }
}

.draha-stitok {
  position: absolute;
  /* Vedľa lana, nie na ňom: v strede sedel presne na kotve a prekryl ju. */
  left: calc(50% + 24px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-family: var(--pismo-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ocel-300);
  background: var(--hlbka-900);
  border: 1px solid rgba(168, 189, 212, .2);
  border-radius: 999px;
  padding: .2rem .55rem;
  white-space: nowrap;
}

/* Paket = príkaz na ceste dolu. */
.paket {
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--mosadz);
  box-shadow: 0 0 0 4px rgba(224, 169, 79, .16), 0 0 14px rgba(224, 169, 79, .8);
  opacity: 0;
}
.scena.leti .paket { animation: paket-let .62s cubic-bezier(.5, 0, .7, 1); }
@keyframes paket-let {
  0% { opacity: 0; transform: translateY(-6px) scale(.6); }
  15% { opacity: 1; transform: translateY(6px) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(104px) scale(.7); }
}

/* Snímka letí opačným smerom — od tabletu k človeku. */
.snimka-listok {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 17px;
  margin-left: -13px;
  border-radius: 2px;
  background: linear-gradient(140deg, #cfe0f2, #7f9ab8);
  border: 1px solid rgba(255, 255, 255, .5);
  opacity: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.scena.rezim-snimka .snimka-listok { animation: listok-let 1.5s cubic-bezier(.4, 0, .3, 1) 1.1s forwards; }
@keyframes listok-let {
  0% { opacity: 0; transform: translateY(6px) scale(.5) rotate(-6deg); }
  20% { opacity: 1; transform: translateY(-10px) scale(1) rotate(2deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-96px) scale(.7) rotate(-3deg); }
}

/* ── Tablet ───────────────────────────────────────────────────────────────
   `.tablet` sa plaví a kotví (animácia transformu), `.tablet-ram` sa nakláňa
   za kurzorom. Sú to dva prvky zámerne: keby si obe siahli na ten istý
   `transform`, animácia by naklonenie prebila. */
.tablet {
  min-width: 0;
  justify-self: center;
  width: 100%;
  max-width: 380px;
  animation: pluti 7s ease-in-out infinite;
}
@keyframes pluti {
  0%, 100% { transform: translateY(0) rotate(-.45deg); }
  50% { transform: translateY(-7px) rotate(.5deg); }
}
/* Zakotvené = koniec pohybu. Zacvakne s malým odrazom a stojí. */
.scena.zakotvene .tablet { animation: zacvaknutie .7s cubic-bezier(.22, 1.5, .36, 1) forwards; }
@keyframes zacvaknutie {
  0% { transform: translateY(-7px) rotate(.5deg); }
  55% { transform: translateY(4px) rotate(-.15deg); }
  100% { transform: none; }
}

.tablet-ram {
  position: relative;
  background: linear-gradient(160deg, #1b2b3d, #0a1522);
  border: 1px solid rgba(168, 189, 212, .28);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out;
}
/* Objímka na stene — bez nej tablet levituje. */
.tablet-ram::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 64px;
  height: 9px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(168, 189, 212, .22), transparent);
  border-radius: 0 0 4px 4px;
}

.tablet-obrazovka {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #050d18;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: .74rem;
}
.tablet-obrazovka > [data-pohlad] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tablet-obrazovka > [data-pohlad][hidden] { display: none; }

/* Systémová lišta Androidu. Pri zamknutí odíde hore a už sa nevráti — to je
   na tom celé to viditeľné. */
.systemova-lista {
  position: absolute;
  inset: 0 0 auto 0;
  height: 15px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding-inline: 7px;
  background: rgba(0, 0, 0, .55);
}
.systemova-lista i { width: 9px; height: 3px; background: rgba(255, 255, 255, .45); border-radius: 1px; }
.scena.zakotvene .systemova-lista { opacity: 0; transform: translateY(-15px); }
.systemova-lista { transition: opacity .4s ease .9s, transform .4s ease .9s; }

.obrazovka-hlava {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .6rem;
  background: rgba(18, 41, 63, .85);
  font-family: var(--pismo-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--ocel-100);
  text-transform: uppercase;
}
.obrazovka-telo {
  flex: 1;
  padding: .65rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-height: 0;
}
.obrazovka-pata {
  padding: .32rem .6rem;
  border-top: 1px solid rgba(168, 189, 212, .12);
  font-family: var(--pismo-mono);
  font-size: .56rem;
  color: var(--ocel-300);
  display: flex;
  justify-content: space-between;
}
.velke-cislo {
  font-family: var(--pismo-mono);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--mosadz);
  margin: 0;
  line-height: 1;
}
.obrazovka-telo .mala { font-size: .6rem; color: var(--ocel-300); margin: 0; }
.polozky { list-style: none; margin: .35rem 0 0; padding: 0; font-family: var(--pismo-mono); font-size: .6rem; }
.polozky li {
  display: flex;
  justify-content: space-between;
  padding: .16rem 0;
  border-bottom: 1px solid rgba(168, 189, 212, .08);
  color: var(--ocel-300);
}
.polozky li span:last-child { color: var(--ocel-100); }

/* Vrstvy nad obrazovkou. */
.prekrytie {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: #020810;
  color: var(--ocel-300);
  font-family: var(--pismo-mono);
  font-size: .64rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
.tablet-obrazovka.restartuje .prekrytie { opacity: 1; }
.pruh { width: 96px; height: 3px; background: rgba(168, 189, 212, .2); border-radius: 2px; overflow: hidden; }
.pruh i { display: block; height: 100%; width: 0; background: var(--mosadz); }
.tablet-obrazovka.restartuje .pruh i { animation: nabeh 1.6s ease-in-out forwards; }
@keyframes nabeh { to { width: 100%; } }

/* Diagnostika sa vypisuje priamo na obrazovke — tak, ako ju vidí technik. */
.diag {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(2, 8, 16, .93);
  padding: .7rem .8rem;
  font-family: var(--pismo-mono);
  font-size: .62rem;
  color: var(--ocel-300);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.tablet-obrazovka.diagnostikuje .diag { opacity: 1; }
.diag ol { list-style: none; margin: 0; padding: 0; }
.diag li { padding: .12rem 0; white-space: nowrap; }
.diag .ok { color: #6ee7a8; }
.diag-nadpis { color: var(--mosadz); letter-spacing: .1em; text-transform: uppercase; font-size: .56rem; margin-bottom: .3rem; }

.zablesk { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
.tablet-obrazovka.snimka .zablesk { animation: zablesknutie .5s ease-out; }
@keyframes zablesknutie { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }

/* ── Účel má vlastnú farbu ─────────────────────────────────────────────────
   Prepnutie účelu musí byť vidieť na prvý pohľad: výdaj stravy je mosadzný,
   dochádzka modrá. Bez farebného rozdielu obe obrazovky splývali a režim
   „prepnutie účelu" vyzeral, že nič nerobí (spätná väzba 29. 8. 2026). */
[data-pohlad] { --ucel-farba: var(--mosadz); }
[data-pohlad="dochadzka"], [data-pohlad="attendance"] { --ucel-farba: var(--modra); }
[data-pohlad] .obrazovka-hlava { color: var(--ucel-farba); border-bottom: 2px solid var(--ucel-farba); }
[data-pohlad] .velke-cislo { color: var(--ucel-farba); }
[data-pohlad] .dioda { background: var(--ucel-farba); box-shadow: 0 0 6px var(--ucel-farba); }

/* Nový pohľad nastupuje stierkou zľava — výmena je udalosť, nie strih. */
.tablet-obrazovka.prepina [data-pohlad]:not([hidden]) { animation: pohlad-nastup .55s cubic-bezier(.22, 1, .36, 1); }
@keyframes pohlad-nastup {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

/* ── OTA aktualizácia ──────────────────────────────────────────────────────
   Overlay s priebehom inštalácie; číslo verzie v päte obrazovky prepne skript. */
.ota {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: rgba(2, 8, 16, .95);
  color: var(--ocel-300);
  font-family: var(--pismo-mono);
  font-size: .62rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.tablet-obrazovka.aktualizuje .ota { opacity: 1; }
.ota-verzie { color: var(--ocel-100); }
.ota-verzie b { color: var(--mosadz); font-weight: 700; }
.ota .pruh { width: 120px; }
.tablet-obrazovka.aktualizuje .ota .pruh i { animation: nabeh 2.6s ease-in-out forwards; }
.ota-pozn { font-size: .56rem; color: var(--ocel-300); opacity: .75; }

.kurzor {
  display: inline-block;
  width: 6px;
  height: .9em;
  background: var(--mosadz);
  vertical-align: -1px;
  animation: blikanie 1s steps(2) infinite;
}

.tablet-popis {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--ocel-300);
}
.tablet-popis .zamknute { color: var(--mosadz); }

/* --------------------------------------------------------------------------
   14.4 Hĺbkové pozadie
   Plátno s planktónom v úvode. Je to jediné plátno na webe a beží len kým je
   úvod na obrazovke.
   -------------------------------------------------------------------------- */
.hlbka-pozadie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14.5 Bežiaci pás s telemetriou
   -------------------------------------------------------------------------- */
.pas {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.2rem);
  overflow: hidden;
  border-block: 1px solid rgba(168, 189, 212, .16);
  padding-block: .7rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.pas-stopa { display: flex; width: max-content; }
.pas.bezi .pas-stopa { animation: pas-posun 46s linear infinite; }
.pas:hover .pas-stopa { animation-play-state: paused; }
@keyframes pas-posun { to { transform: translateX(-50%); } }

.pas ul { display: flex; list-style: none; margin: 0; padding: 0; }
.pas li {
  font-family: var(--pismo-mono);
  font-size: .7rem;
  color: var(--ocel-300);
  padding-inline: 1.1rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.pas li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mosadz); opacity: .7; }

/* --------------------------------------------------------------------------
   14.6 Počítadlá a karty pod kurzorom
   -------------------------------------------------------------------------- */
.pocitadlo { font-variant-numeric: tabular-nums; }

.polozka { position: relative; transition: border-left-color .25s, transform .25s; }
.polozka::before {
  content: "";
  position: absolute;
  inset: -.6rem -.6rem -.6rem -1.1rem;
  border-radius: 4px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--akcent-plocha) 12%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  z-index: -1;
}
.polozka:hover::before { opacity: 1; }
.polozka:hover { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   14.7 Kalkulačka — posuvník
   -------------------------------------------------------------------------- */
.posuvnik {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 320px;
  height: 26px;
  background: transparent;
  margin-top: .9rem;
  cursor: pointer;
}
.posuvnik::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--akcent-plocha) 0 var(--vyplnenie, 20%), var(--linka-vyrazna) var(--vyplnenie, 20%) 100%);
}
.posuvnik::-moz-range-track { height: 4px; border-radius: 2px; background: var(--linka-vyrazna); }
.posuvnik::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--akcent-plocha); }
.posuvnik::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--akcent-plocha);
  border: 3px solid var(--pozadie-karta);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  transition: transform .12s;
}
.posuvnik::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--akcent-plocha); border: 3px solid var(--pozadie-karta);
}
.posuvnik:active::-webkit-slider-thumb { transform: scale(1.15); }

tbody tr { transition: background-color .25s, box-shadow .25s; }
tbody tr.aktivne {
  background: color-mix(in srgb, var(--akcent-plocha) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--akcent-plocha);
}

/* --------------------------------------------------------------------------
   14.8 Kľud na povel
   Jedno miesto, kde sa vypína všetko. Odhaľované prvky musia zostať viditeľné —
   inak by pri vypnutých animáciách zmizol obsah stránky.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .odhal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .uvod .stitok, .uvod h1, .uvod .perex, .uvod .tlacidla,
  .uvod .pod-tlacidlami, .uvod .scena,
  .tablet, .scena.zakotvene .tablet,
  .pas.bezi .pas-stopa, .scena.leti .paket,
  .scena.rezim-ukotvenie .kotva-ikona, .scena.rezim-ukotvenie .lano-cesta,
  .scena.rezim-snimka .snimka-listok,
  .tablet-obrazovka.restartuje .pruh i, .tablet-obrazovka.snimka .zablesk,
  .vypis li, .kurzor, .kurzor-znak {
    animation: none !important;
  }
  .uvod h1::before { animation: none !important; transform: none; }
  .uvod h1::after, .tl-hlavne::after { display: none; }
  .paket, .snimka-listok { opacity: 0 !important; }
  .vypis li { opacity: 1 !important; transform: none !important; }
  /* Bez pohybu sa kotva aj lano ukážu rovno v koncovej polohe. */
  .kotva-ikona { opacity: 1; transform: translate(-50%, 66px); }
  .lano-cesta { stroke-dashoffset: 0; }
  .okno, .tablet-ram { transform: none !important; }
  .systemova-lista { transition: none !important; }
  .hlbka-pozadie { display: none; }
}

@media (max-width: 560px) {
  .lano { height: 84px; }
  /* Na telefóne sa scéna zmestí len vtedy, keď sa nič nedrží svojej šírky. */
  .scena, .okno, .tablet { max-width: 100%; }
  .okno-znacka { display: none; }
  .udaje dt, .udaje dd { font-size: .72rem; padding-inline: .7rem; }
  .prikazy { gap: .3rem; }
  @keyframes paket-let {
    0% { opacity: 0; transform: translateY(-6px) scale(.6); }
    15% { opacity: 1; transform: translateY(6px) scale(1); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateY(84px) scale(.7); }
  }
  @keyframes kotva-pad {
    0% { opacity: 0; transform: translate(-50%, -6px) rotate(-10deg) scale(.85); }
    25% { opacity: 1; }
    70% { transform: translate(-50%, 60px) rotate(4deg) scale(1); }
    85% { transform: translate(-50%, 48px) rotate(-2deg); }
    100% { opacity: 1; transform: translate(-50%, 52px) rotate(0) scale(1); }
  }
  .scena.zakotvene .kotva-ikona { transform: translate(-50%, 52px); }
}

/* --------------------------------------------------------------------------
   16. Režimy nasadenia — prepínacie karty (stránka funkcií)
   Rádiá + labely: prepínanie funguje bez JavaScriptu. Panel sa ukazuje
   pravidlom :checked ~, preto musia byť rádiá súrodenci panelov.
   -------------------------------------------------------------------------- */
.nasadenie { margin-top: 2.2rem; }
.nasadenie input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.nasadenie-prepinace { display: flex; flex-wrap: wrap; gap: .5rem; }
.nasadenie-prepinace label {
  border: 1px solid var(--linka-vyrazna);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-tlmeny);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.nasadenie-prepinace label:hover { color: var(--text); }
#rezim-spravca:checked ~ .nasadenie-prepinace label[for="rezim-spravca"],
#rezim-bez:checked ~ .nasadenie-prepinace label[for="rezim-bez"],
#rezim-prehliadac:checked ~ .nasadenie-prepinace label[for="rezim-prehliadac"] {
  background: var(--akcent-plocha);
  border-color: var(--akcent-plocha);
  color: #06101d;
}

.nasadenie-panel { display: none; margin-top: 1.4rem; }
#rezim-spravca:checked ~ .nasadenie-panel[data-panel="spravca"],
#rezim-bez:checked ~ .nasadenie-panel[data-panel="bez"],
#rezim-prehliadac:checked ~ .nasadenie-panel[data-panel="prehliadac"] { display: block; }

.nasadenie-panel { animation: panel-nastup .3s ease-out; }
@keyframes panel-nastup { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .nasadenie-panel { animation: none; } }

.nasadenie-panel .vyryv { margin: 0; }
.nasadenie-tabulka { width: 100%; border-collapse: collapse; margin-top: .4rem; }
.nasadenie-tabulka td { padding: .55rem 0; border-bottom: 1px solid var(--linka); vertical-align: top; }
.nasadenie-tabulka td:first-child { color: var(--text-tlmeny); width: 38%; padding-right: 1rem; }
.nasadenie-ano { color: var(--akcent); font-weight: 600; }
.nasadenie-pozn { margin-top: 1rem; font-size: .92rem; color: var(--text-tlmeny); }

/* --------------------------------------------------------------------------
   17. Pätička — prevádzkovateľ a právne odkazy
   -------------------------------------------------------------------------- */
.paticka address { font-style: normal; line-height: 1.75; }
.paticka .prevadzkovatel-ico { color: var(--text-tlmeny); font-size: .88rem; }