/* ==========================================================================
   zona.css — komponenty zóny výroby webů

   Vzhled je klon zóny 2MARS (dema/_interni/2mars-brand, site.css), barvy
   a písma z tokens.css. Pořadí bloků: základ · lišta · stavový pruh · stránka
   · role · dlaždice · řetěz · úkoly · milníky · karty a stavy · chipy
   · galerie · tabulka · kostra · seznam · patička · zápis do deníku.

   Stránkově specifické CSS NEPATŘÍ sem — každá skupina stránek má vlastní
   soubor komponenty/zona-<skupina>.css, který si stránka přilinkuje za tímhle.
   Sdílené třídy odsud se nepřepisují, jen doplňují.
   ========================================================================== */
/* ---------- základ (komponenty.css) ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* [hidden] musí vyhrát nad každým display — jinak display:block na panelu
   skupiny přebije skrývání a zavřený panel dál tlačí na šířku stránky. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font: var(--fs-base)/var(--lh-base) var(--font-sans);
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* clip, ne hidden — hidden by zabil sticky lištu */
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
h1, h2, h3 { line-height: var(--lh-tight); font-weight: 700; letter-spacing: -.02em; margin: 0; }
/* Michroma drží jen nadpisy (manuál: uppercase, tracking .12em) — všude jinde Space Grotesk. */
h1 { font-family: var(--font-head); font-weight: 400; font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: .12em; }
p { margin: 0 0 var(--sp-3); }
code { font-family: var(--font-mono); font-size: .92em; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.vis-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--primary); color: var(--bg); padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--r-md) 0; }
.skip:focus { left: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .65rem 1.2rem; border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--primary); color: var(--bg); }
.btn--primary:hover { background: var(--primary-deep); color: var(--bg); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--sm { min-height: 44px; padding: .5rem 1rem; font-size: var(--fs-sm); }   /* 44, ne 40 — §14 platí i pro malá tlačítka */

/* Vložený odkaz v textu: svislý padding zvětší dotykovou plochu na ≥ 24 px
   (WCAG 2.5.8), aniž by zvětšil řádek — u inline prvku padding nemění
   výšku řádkového boxu. Jedno pravidlo místo čtyř tříd po skupinách. */
.perex a, .pas-uvod a, .ucinnost a, .mezera a, .kostra__blok a, .seznam a, .prazdno a,
.karta__pozn a, .karta__meta a, .karta__pata a, .milnik__text a, .role__co a, .tabulka td a { padding-block: .3em; }

/* Stavové barvy textu — globálně, ne jen v tabulce. Cyan (--primary) je
   akcent, ne „hotovo“: hotovo je zelená, pozor je žlutá, nic je šedá. */
.je-ok { color: var(--ok); }
.je-pozor { color: var(--warn); }
.je-nic { color: var(--ink-mute); }

/* Chyba načtení dat (Z.chyba) — jediné místo, kde je červená oprávněná. */
.zona-chyba { border: 1px solid var(--line-strong); border-left: 3px solid var(--err); border-radius: var(--r-sm); padding: var(--sp-4); color: var(--ink-soft); font-size: var(--fs-sm); }
.zona-chyba strong { color: var(--ink); }

/* ---------- lišta zóny (.zona-nav) ---------- */
.zona-nav {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-alt); position: sticky; top: 0; z-index: 50;
}
.zona-nav__wrap {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5); padding-top: var(--sp-2); padding-bottom: var(--sp-2);
}
.zona-nav__znacka {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink);
  font-weight: 600; letter-spacing: .02em; font-size: 1.05rem; white-space: nowrap; padding: .35rem 0;
}
.zona-nav__znacka small { font-weight: 500; letter-spacing: .12em; color: var(--ink-mute); font-size: .7rem; }
.zona-nav__znacka:hover { text-decoration: none; color: var(--primary); }
.zona-nav__znacka:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.zona-nav__lig { flex: 0 0 auto; color: var(--primary); }
.zona-nav__obsah { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); flex: 1 1 auto; min-width: 0; }
.zona-nav__blok { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.zona-nav .zona-nav__zalozka {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 17px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: transparent;
  color: var(--ink-soft); font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.zona-nav .zona-nav__zalozka svg { width: .85em; height: .85em; transition: transform 180ms ease; }
.zona-nav .zona-nav__zalozka:hover { border-color: var(--primary); color: var(--ink); text-decoration: none; }
.zona-nav .zona-nav__zalozka:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.zona-nav__blok.je-rozbalena > .zona-nav__zalozka svg { transform: rotate(180deg); }
.zona-nav .zona-nav__blok.je-aktivni > .zona-nav__zalozka,
.zona-nav a.zona-nav__zalozka.je-aktivni { background: var(--primary); border-color: var(--primary); color: var(--bg); }
.zona-nav .zona-nav__zalozka.je-venku { color: var(--ink-mute); }
.zona-nav .zona-nav__zalozka.je-venku:hover { color: var(--ink); }
.je-venku__znak { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }

.zona-nav .zona-nav__panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 1; display: block;
  width: max-content; max-width: min(80vw, 22rem); margin: 0; padding: var(--sp-2); list-style: none;
  background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
/* Poslední skupina má panel zarovnaný doprava: u kraje okna by zleva
   přetekl ven (regrese to měří na 1024 px). Ostatní zůstávají vlevo. */
.zona-nav .zona-nav__blok:last-child .zona-nav__panel { left: auto; right: 0; }
.zona-nav .zona-nav__panel li { display: block; margin: 0; }
.zona-nav .zona-nav__panel a {
  display: flex; align-items: center; min-height: 44px; padding: .45rem .6rem; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.zona-nav .zona-nav__panel a:hover { background: rgba(255,255,255,.06); color: var(--ink); text-decoration: none; }
.zona-nav .zona-nav__panel a[aria-current="page"] { background: rgba(255,255,255,.06); color: var(--ink); box-shadow: inset 2px 0 0 var(--primary); }
.zona-nav .zona-nav__panel a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.zona-nav__prepinac {
  display: none; align-items: center; gap: var(--sp-2); margin-left: auto;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  min-height: 44px; padding: .4rem .9rem; cursor: pointer;
}
.zona-nav__prepinac svg { width: 1rem; height: 1rem; flex: 0 0 auto; transition: transform 180ms ease; }
.zona-nav__prepinac:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.zona-nav.je-otevrena .zona-nav__prepinac svg { transform: rotate(180deg); }

@media (max-width: 900px) {
  .zona-nav__prepinac { display: inline-flex; }
  .zona-nav__obsah { display: none; flex-direction: column; align-items: stretch; gap: var(--sp-4); flex-basis: 100%; padding-bottom: var(--sp-3); }
  .zona-nav.je-otevrena .zona-nav__obsah { display: flex; }
  .zona-nav__blok { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .zona-nav .zona-nav__zalozka svg { display: none; }
  .zona-nav .zona-nav__zalozka { cursor: default; }
  .zona-nav .zona-nav__panel {
    position: static; width: auto; max-width: none; padding: 0 0 0 var(--sp-2); background: none; border: 0; box-shadow: none;
    display: flex; flex-direction: column; gap: 0; width: 100%;
  }
  .zona-nav .zona-nav__panel a { padding: .5rem 0; border-radius: 0; }
  .zona-nav .zona-nav__panel a[aria-current="page"] { background: none; box-shadow: none; border-left: 2px solid var(--primary); padding-left: var(--sp-3); }
}

/* ---------- stavový pruh — soused lišty, ne její dítě ---------- */
.zona-stav { position: sticky; top: var(--zona-nav-v, 53px); z-index: 40; border-bottom: 1px solid var(--line); background: var(--stav-bg); }
.zona-stav__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-4); padding-top: 9px; padding-bottom: 9px; font-size: var(--fs-sm); }
.zona-stav__pol { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.zona-stav__pol--jmeno { font-weight: 700; color: var(--ink); }
.zona-stav__pol b { color: var(--primary); font-weight: 600; font-family: var(--font-mono); font-size: .95em; }
.zona-stav__odd { width: 1px; height: 15px; background: var(--line-strong); }
.zona-stav__vpravo { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-mute); }
.zona-stav__pocet { font-family: var(--font-mono); min-width: 19px; height: 19px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--primary); color: var(--bg); font-size: .7rem; font-weight: 700; }
@media (max-width: 620px) { .zona-stav__odd { display: none; } .zona-stav__vpravo { margin-left: 0; flex-basis: 100%; } }
@media (max-width: 440px) { .zona-nav__znacka small { display: none; } .zona-nav__wrap { gap: var(--sp-2) var(--sp-3); } .zona-nav__prepinac { padding: .4rem .7rem; letter-spacing: .08em; } }

/* ---------- stránka ---------- */
main { padding: var(--section-y) 0; }
main .wrap { max-width: var(--wrap-text); }
.zona-titulek { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.zona-titulek h1 { color: var(--primary); }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent); padding-bottom: 5px; border-bottom: 1px solid var(--primary);
}
.section-eyebrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.perex { font-size: var(--fs-lg); color: var(--ink-soft); max-width: 62ch; margin-bottom: var(--sp-5); }
.ucinnost { color: var(--ink-mute); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.ucinnost strong { color: var(--ink-soft); }
.pas { margin-top: var(--sp-8); }
.pas:first-of-type { margin-top: 0; }
.pas-nadpis { font-family: var(--font-head); font-size: .95rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin: 0 0 var(--sp-3); }
.pas-uvod { color: var(--ink-soft); font-size: var(--fs-sm); max-width: 68ch; margin-bottom: var(--sp-5); }
.pozn { font-size: var(--fs-xs); color: var(--ink-mute); margin-top: var(--sp-3); }
.pozn a { color: var(--primary); }

/* ---------- role (kdo do zóny chodí a co smí) ---------- */
.role { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.role__karta { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-alt); padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.role__karta.je-ty { border-color: var(--primary); }
.role__znak { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--bg-inset); color: var(--ink-soft); border: 1px solid var(--line-strong); }
.role__karta.je-ty .role__znak { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.role__jmeno { font-weight: 700; }
.role__titul { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.role__ty { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.role__co { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.role__seznam { margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--ink-soft); display: grid; gap: 2px; }
.role__seznam li { overflow-wrap: anywhere; padding-left: .9em; text-indent: -.9em; }
.role__seznam li::before { content: "· "; color: var(--ink-mute); }
.role__seznam--ne li::before { content: "× "; color: var(--primary); }
.role__pop { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin: var(--sp-2) 0 2px; }

/* ---------- souhrn: dlaždice ---------- */
.souhrn__mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--sp-3); }
.souhrn__karta { position: relative; display: flex; flex-direction: column; gap: 3px; padding: var(--sp-4); padding-left: calc(var(--sp-4) + 3px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-alt); overflow: hidden; transition: border-color 180ms ease; }
.souhrn__karta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.souhrn__karta:hover { border-color: var(--line-strong); }
/* Žlutá dlaždice musí být žlutá i proužkem a číslem: ve vzoru zóny webů tu
   byl akcent, což se bije s barevnou řečí (§6 JAK-STAVET) — dvě skupiny to
   nahlásily nezávisle. Opraveno tady, ne v každé skupině. Přenést do vzoru. */
.souhrn__karta.je-pozor::before { background: var(--warn); }
.souhrn__karta.je-pozor .souhrn__cislo { color: var(--warn); }
.souhrn__karta.je-prazdno { background: transparent; border-style: dashed; }
.souhrn__karta.je-prazdno .souhrn__cislo { color: var(--ink-mute); }
.souhrn__nadpis { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.souhrn__ikona { width: 15px; height: 15px; flex: none; color: var(--primary); opacity: .85; fill: none; stroke: currentColor; stroke-width: 2; }
.souhrn__cislo { font-family: var(--font-mono); font-size: 1.5rem; line-height: 1.15; color: var(--ink); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.souhrn__cislo small { font-size: .9rem; color: var(--ink-mute); font-weight: 500; }
.souhrn__popis { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.souhrn__odkaz { margin-top: auto; padding-top: var(--sp-3); min-height: 44px; display: inline-flex; align-items: flex-end; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.souhrn__odkaz:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- řetěz výroby (klon pásu levelů) ---------- */
.retez__pas { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: var(--sp-3); }
.retez__dilek {
  position: relative; font: inherit; cursor: pointer; appearance: none; min-height: 56px;
  border: 1px solid var(--line); border-radius: 3px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 4px 2px; color: var(--ink-mute); font-size: .66rem; line-height: 1.1; text-align: center;
}
.retez__dilek b { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; color: var(--ink); }
.retez__dilek--plny { background: var(--primary); border-color: var(--primary); color: var(--bg); }
.retez__dilek--plny b { color: var(--bg); }
.retez__dilek--aktualni { border-color: var(--focus-ring); border-width: 2px; color: var(--ink); background: var(--primary-tint); }
.retez__dilek--prazdny { opacity: .5; }
.retez__dilek.je-ukazany { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.retez__dilek:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.retez__panel { border-left: 2px solid var(--primary); padding-left: var(--sp-3); color: var(--ink-soft); font-size: var(--fs-sm); }
.retez__panel ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 4px; }
.retez__panel li::before { content: "○ "; color: var(--ink-mute); }
.retez__panel li.je-splneno::before { content: "✓ "; color: var(--primary); }
.retez__panel p { margin: 0 0 var(--sp-2); }
@media (max-width: 640px) { .retez__pas { grid-template-columns: repeat(5, 1fr); } .retez__dilek { min-height: 60px; } }

/* ---------- úkoly ---------- */
.ukoly { display: grid; gap: var(--sp-4); }
.ukol { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: clamp(1rem, 2.4vw, 1.4rem); background: var(--surface); }
.ukol--rutina { border-style: dashed; background: transparent; }
.ukol__hlava { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.ukol__nazev { font-weight: 700; font-size: 1.05rem; }
.ukol__typ { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .18rem .6rem; }
.ukol__popis { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.ukol__pata { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: .74rem; color: var(--ink-mute); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.ukol__stav { font-weight: 600; color: var(--primary); }
.ukol__akce { margin-top: var(--sp-3); }

/* ---------- milníky ---------- */
.milniky { list-style: none; margin: 0; padding: 0; display: grid; }
.milnik { display: grid; grid-template-columns: 110px 14px 1fr; gap: var(--sp-3); align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.milnik:first-child { border-top: 0; }
.milnik__cas { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-mute); white-space: nowrap; padding-top: 2px; font-variant-numeric: tabular-nums; }
.milnik__tecka { display: grid; place-items: center; padding-top: 6px; }
.milnik__tecka i { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); display: block; }
.milnik__telo { display: grid; gap: 2px; min-width: 0; }
.milnik__text { font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.milnik__id { font-size: var(--fs-xs); color: var(--ink-mute); }
@media (max-width: 560px) { .milnik { grid-template-columns: 1fr; gap: 2px; } .milnik__tecka { display: none; } }

/* ---------- deník (poslední zápisy) ---------- */
.souhrn__denik { margin-top: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-alt); }
.souhrn__zapisy { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.souhrn__zapisy li { display: grid; gap: 1px; font-size: var(--fs-sm); padding-left: var(--sp-3); border-left: 2px solid var(--line-strong); }
.souhrn__cas { font-size: var(--fs-xs); color: var(--ink-mute); }
.souhrn__text { color: var(--ink-soft); }

/* ---------- stavy a karty fronty (klon zakázek) ---------- */
.stavy-pruh { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.stav-pip { display: flex; align-items: baseline; gap: var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .3rem .8rem; }
.stav-pip__pocet { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; color: var(--primary); }
.stav-pip__nazev { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.stav-pip--prazdny { opacity: .45; }
.stav-pip--prazdny .stav-pip__pocet { color: var(--ink-mute); }
.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.karta { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--sp-4); background: var(--surface); }
.karta--vybran { border-left-color: var(--ink-mute); }
.karta--demo_vyroba, .karta--jednani { border-left-color: var(--primary); }
.karta--demo_hotovo { border-left-color: var(--warn); }
.karta--demo_nasazeno, .karta--produkce, .karta--osloven { border-left-color: var(--ok); }
.karta--odmitnut { border-left-color: var(--line-strong); opacity: .72; }
.karta__hlava { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.karta__co { font-size: var(--fs-sm); font-weight: 600; }
.karta__stav { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .05rem .45rem; white-space: nowrap; }
.karta__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: .72rem; color: var(--ink-mute); margin: 0 0 var(--sp-2); }
.karta__pozn { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; padding-left: var(--sp-3); border-left: 2px solid var(--line); }
.karta__pata { font-size: .74rem; color: var(--ink-soft); margin: var(--sp-2) 0 0; }

/* ---------- chipy (vlny) ---------- */
.chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink-soft); font: inherit; font-size: .78rem; cursor: pointer; }
.chip:hover { border-color: var(--primary); color: var(--ink); }
.chip.je-vybrany { border-color: var(--primary); background: var(--primary-tint); color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.chip__pocet { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--bg-inset); font-size: .68rem; color: var(--ink-mute); }
.chip.je-vybrany .chip__pocet { background: rgba(0,0,0,.18); color: inherit; }
.vlna-firmy { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 4px var(--sp-4); font-size: var(--fs-sm); color: var(--ink-soft); font-family: var(--font-mono); }
.vlna-firmy li::before { content: "· "; color: var(--ink-mute); }
.vlna-firmy__stav { grid-column: 1 / -1; font-family: var(--font-sans); }
.vlna-firmy__stav::before { content: none; }

/* ---------- galerie dem (dlaždice) ---------- */
.dema { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: var(--sp-3); }
.demo { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-alt); overflow: hidden; display: grid; }
.demo__nahled { aspect-ratio: 4 / 3; background: var(--bg-inset); display: grid; place-items: center; color: var(--ink-mute); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.demo__nahled--nasazeno { background: linear-gradient(135deg, var(--ok-soft), var(--bg-inset)); color: var(--ok); }   /* nasazeno = hotovo = zelená, ne cyan */
.demo__telo { padding: var(--sp-2) var(--sp-3) var(--sp-3); display: grid; gap: 2px; }
.demo__domena { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.demo__meta { font-size: .66rem; color: var(--ink-mute); letter-spacing: .06em; }

/* ---------- tabulka (kontrola, nabídka) ---------- */
.tabulka { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: var(--fs-sm); }
.tabulka th, .tabulka td { text-align: left; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.tabulka th { color: var(--ink); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); }
.tabulka td { color: var(--ink-soft); }
.tabulka td b { color: var(--ink); font-weight: 600; }
/* position: relative — .vis-hidden (absolute) uvnitř buněk se jinak váže
   na viewport a na 320 px „přetéká“ dokument, i když tabulka roluje. */
.tabulka-obal { overflow-x: auto; position: relative; }

/* ---------- kostra stránky, která ještě nemá data ---------- */
.kostra { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
.kostra__blok { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--sp-4); }
.kostra__blok h3 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-bottom: var(--sp-2); }
.kostra__blok--ne { border-color: var(--primary); }
.kostra__blok--ne h3 { color: var(--primary); }
.kostra__blok ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--ink-soft); }
.kostra__blok li::before { content: "· "; color: var(--ink-mute); }
.kostra__blok--ne li::before { content: "× "; color: var(--primary); }
.kostra__blok p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

.seznam { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.seznam li { display: grid; gap: 1px; padding: var(--sp-3) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-soft); }
.seznam li:first-child { border-top: 0; }
.seznam b { color: var(--ink); font-weight: 600; }
.seznam code { color: var(--ink-mute); }

/* ---------- prázdný stav — když nic není, řekne se to, nepředstírá se ---------- */
.prazdno { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--sp-5); color: var(--ink-soft); font-size: var(--fs-sm); margin-top: var(--sp-4); }
.prazdno strong { color: var(--ink); display: block; margin-bottom: var(--sp-1); }
/* ---------- přiznané mezery (texty.json) ---------- */
.mezery { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.mezera { border-left: 2px solid var(--line-strong); padding-left: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-soft); }
.mezera b { color: var(--ink); font-weight: 600; }

/* ---------- patička ---------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); color: var(--ink-soft); padding: var(--sp-6) 0 var(--sp-5); font-size: var(--fs-sm); }
.subfooter { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-mute); }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.legal-links a { color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 0; }
.legal-links a:hover { color: var(--ink); }
.paleta { font: inherit; font-size: var(--fs-xs); color: var(--ink-mute); background: none; border: 1px solid var(--line-strong); border-radius: var(--r-pill); min-height: 44px; padding: .4rem .9rem; cursor: pointer; }
.paleta:hover { color: var(--ink); border-color: var(--primary); }

/* ---------- plovoucí zápis do deníku (klon „Vyjádřit se") ---------- */
.zapis-tlacitko {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 60; display: inline-flex; align-items: center; gap: var(--sp-2);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bg); background: var(--primary); border: 1px solid var(--primary); border-radius: var(--r-pill);
  min-height: 44px; padding: .7rem 1.1rem; cursor: pointer; box-shadow: var(--shadow-md);
}
.zapis-tlacitko svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; }
.zapis-tlacitko:hover { background: var(--primary-deep); }
.zapis-tlacitko:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
@media (max-width: 600px) { .zapis-tlacitko span { display: none; } .zapis-tlacitko { padding: .7rem; } }
.zapis-panel { position: fixed; right: var(--sp-4); bottom: calc(var(--sp-4) + 56px); z-index: 61; width: min(24rem, calc(100vw - 2 * var(--sp-4))); background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: 0 14px 34px rgba(0,0,0,.5); display: grid; gap: var(--sp-3); }
.zapis-panel[hidden] { display: none; }
.zapis-panel h2 { font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.zapis-panel__web { width: 100%; min-height: 44px; font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }
.zapis-panel textarea { width: 100%; min-height: 6rem; font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); resize: vertical; }
.zapis-panel__pozn { font-size: var(--fs-xs); color: var(--ink-mute); margin: 0; }
.zapis-panel__akce { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.zapis-panel__stav { font-size: var(--fs-xs); color: var(--primary); margin: 0; }

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