/* Vizuální systém aplikace Masticlife katalog.
 *
 * Zásady: jedna obrazovka = jeden verdikt nahoře (metriky + „Co řešit“), detaily
 * v záložkách a sbalitelných sekcích; čísla tabulková a vpravo; kód (code) jen pro
 * technické klíče; čtyři stavy (ok / pozor / chyba / neutral), vždy tečka + slovo.
 * Editory (balíček 3+) používají .formular-tabulka a .lista-ulozit.
 */

:root {
  /* barvy */
  --inkoust: #1b2219;
  --text-2: #4f574c;          /* sekundární text, 7:1 na bílé */
  --text-3: #5f675b;          /* popisky, ≥ 5,5:1 na bílé i na pozadí */
  --linka: #e1e6dc;
  --linka-silna: #cdd5c6;
  --pozadi: #f4f6f1;
  --plocha: #ffffff;
  --plocha-2: #f8faf6;
  --akcent: #2f6b25;
  --akcent-tmavy: #24541c;
  --akcent-svetly: #e6f0e1;
  --ok: #2f6b25;      --ok-pozadi: #e6f0e1;
  --pozor: #8a5a00;   --pozor-pozadi: #fbf1d9;
  --chyba: #a8361f;   --chyba-pozadi: #fbecea;
  --neutral: #5f675b; --neutral-pozadi: #edf0ea;
  --kontrola: #1f5f8b; --kontrola-pozadi: #e5eff7;  /* překlad ke kontrole (5,8:1 na svém pozadí, 6,7:1 na bílé) */
  /* typografie */
  --pismo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pismo-kod: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: .8125rem; --t-s: .875rem; --t-m: .9375rem; --t-l: 1.125rem; --t-xl: 1.5rem;
  /* mezery a tvary */
  --m-1: .25rem; --m-2: .5rem; --m-3: .75rem; --m-4: 1rem; --m-5: 1.5rem; --m-6: 2rem;
  --r-s: .375rem; --r-m: .625rem;
  --panel: 14rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--t-m)/1.55 var(--pismo); color: var(--inkoust); background: var(--pozadi); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: var(--t-xl); font-weight: 700; }
h2 { font-size: var(--t-l); font-weight: 650; }
h3 { font-size: var(--t-m); font-weight: 650; }
p { margin: 0 0 var(--m-3); }
a { color: var(--akcent); text-underline-offset: .15em; }
a:visited { color: var(--akcent); }
a:hover { color: var(--akcent-tmavy); }
code { font-family: var(--pismo-kod); font-size: .86em; background: var(--neutral-pozadi); padding: .08em .4em; border-radius: var(--r-s); white-space: nowrap; }
.cislo { font-variant-numeric: tabular-nums; }

/* ---------- Kostra: levý panel + obsah ---------- */
.aplikace { display: grid; grid-template-columns: var(--panel) minmax(0, 1fr); min-height: 100vh; }
.panel { background: var(--plocha); border-right: 1px solid var(--linka); padding: var(--m-4) var(--m-3); display: flex; flex-direction: column; gap: var(--m-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.panel__znacka { font-weight: 700; color: var(--inkoust); text-decoration: none; padding: 0 var(--m-2); }
.panel__znacka:visited { color: var(--inkoust); }
.panel__znacka small { display: block; font-weight: 400; color: var(--text-3); font-size: var(--t-xs); }
.menu { display: flex; flex-direction: column; gap: var(--m-3); }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-skupina__nadpis { margin: 0 0 var(--m-1); padding: 0 var(--m-2); font-size: var(--t-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.menu a { display: flex; justify-content: space-between; align-items: center; padding: .4rem var(--m-2); border-radius: var(--r-s); color: var(--inkoust); text-decoration: none; }
.menu a:hover { background: var(--plocha-2); }
.menu a[aria-current="page"] { background: var(--akcent-svetly); color: var(--akcent-tmavy); font-weight: 650; }
.panel__pata { margin-top: auto; font-size: var(--t-xs); color: var(--text-3); display: flex; flex-direction: column; gap: var(--m-2); padding: 0 var(--m-2); }
.panel__pata form { margin: 0; }
.panel__uzivatel { color: inherit; }
.panel__uzivatel[aria-current="page"] { font-weight: 600; }
html:not(.js) .jen-js { display: none; }
.generator-hesla { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-2); }
.generator-hesla__vystup { font-size: var(--t-s); }
.generator-hesla__vystup code { user-select: all; font-size: 1em; }

.obsah { padding: var(--m-5) var(--m-6) var(--m-6); max-width: 76rem; width: 100%; }
.obsah--uzke { max-width: 28rem; margin: 10vh auto; padding: var(--m-4); }

@media (max-width: 52rem) {
  .aplikace { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--linka); padding: var(--m-2) var(--m-4); }
  .menu, .menu ul { flex-direction: row; flex-wrap: wrap; gap: 2px; }
  .menu-skupina__nadpis { display: none; }
  .panel__pata { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .obsah { padding: var(--m-4); }
}

/* ---------- Hlavička stránky ---------- */
.hlava { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--m-3); margin-bottom: var(--m-4); }
.hlava__titul { display: flex; flex-direction: column; gap: var(--m-1); }
.hlava__pod { color: var(--text-2); font-size: var(--t-s); margin: 0; }
.hlava__pod code, .problem code { white-space: normal; overflow-wrap: anywhere; }
.problem__text { overflow-wrap: anywhere; }
.hlava__akce { display: flex; flex-wrap: wrap; gap: var(--m-2); align-items: center; }
.hlava__akce form { margin: 0; }
.drobky { font-size: var(--t-s); color: var(--text-3); }
.drobky a { color: var(--text-3); }

/* ---------- Záložky ---------- */
.zalozky { display: flex; flex-wrap: wrap; gap: var(--m-1); border-bottom: 1px solid var(--linka-silna); margin: 0 0 var(--m-5); }
.zalozky a { padding: .55rem var(--m-3); color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; gap: var(--m-2); align-items: center; }
.zalozky a:hover { color: var(--inkoust); }
.zalozky a[aria-current="page"] { color: var(--inkoust); font-weight: 650; border-bottom-color: var(--akcent); }
.zalozky .pocet { font-size: var(--t-xs); background: var(--neutral-pozadi); color: var(--text-2); border-radius: 1rem; padding: 0 .45rem; font-variant-numeric: tabular-nums; }

/* ---------- Plochy ---------- */
.karta { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-m); padding: var(--m-4) var(--m-5); }
.karta + .karta, .sekce + .sekce { margin-top: var(--m-4); }
.karta__hlava { display: flex; justify-content: space-between; align-items: baseline; gap: var(--m-3); margin-bottom: var(--m-3); }
.karta__hlava p { margin: 0; color: var(--text-3); font-size: var(--t-s); }
.mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--m-4); align-items: start; }
.mrizka .karta + .karta { margin-top: 0; }

/* ---------- Metriky (souhrn nahoře) ---------- */
.metriky { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--m-3); margin-bottom: var(--m-4); }
.metrika { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-m); padding: var(--m-3) var(--m-4); border-top: 3px solid var(--linka-silna); }
.metrika--ok { border-top-color: var(--ok); }
.metrika--pozor { border-top-color: #d49a1c; }
.metrika--chyba { border-top-color: var(--chyba); }
.metrika__nazev { font-size: var(--t-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.metrika__hodnota { font-size: 1.75rem; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.metrika__hodnota small { font-size: var(--t-m); font-weight: 400; color: var(--text-3); }
.metrika__pozn { font-size: var(--t-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Verdikt a „Co řešit“ ---------- */
.verdikt { display: flex; gap: var(--m-3); align-items: center; padding: var(--m-3) var(--m-4); border-radius: var(--r-m); margin-bottom: var(--m-4); font-weight: 600; }
.verdikt--ok { background: var(--ok-pozadi); color: var(--ok); }
.verdikt--pozor { background: var(--pozor-pozadi); color: var(--pozor); }
.verdikt--chyba { background: var(--chyba-pozadi); color: var(--chyba); }
.verdikt--neutral { background: var(--neutral-pozadi); color: var(--neutral); }
.problemy { list-style: none; margin: 0; padding: 0; }
.problem { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--m-3); padding: var(--m-3) 0; border-top: 1px solid var(--linka); }
.problem:first-child { border-top: 0; padding-top: 0; }
.problem__text { margin: 0; }
.problem__krok { margin: var(--m-1) 0 0; color: var(--text-2); font-size: var(--t-s); }
.problem__krok::before { content: "→ "; color: var(--text-3); }
.problem details { margin-top: var(--m-1); }

/* ---------- Stavy: tečka + slovo ---------- */
.stav, .stitek { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-s); font-weight: 600; white-space: nowrap; padding: .1rem .55rem; border-radius: 1rem; background: var(--neutral-pozadi); color: var(--neutral); }
.stav::before, .stitek::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.stav--ok, .stitek--ok { background: var(--ok-pozadi); color: var(--ok); }
.stav--pozor, .stitek--pozor { background: var(--pozor-pozadi); color: var(--pozor); }
.stav--chyba, .stitek--chyba { background: var(--chyba-pozadi); color: var(--chyba); }
.stav--info { background: var(--neutral-pozadi); color: var(--neutral); }
.ok { color: var(--ok); font-weight: 600; }
.chyba { color: var(--chyba); font-weight: 600; }
.pozn { color: var(--text-3); }
.seznam { margin: 0; padding-left: 1.1rem; }
.male { font-size: var(--t-s); }

/* ---------- Popisek–hodnota ---------- */
.udaje { margin: 0; display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: var(--m-2) var(--m-5); }
.udaje dt { color: var(--text-3); min-width: 6rem; }
.udaje dt code { white-space: normal; overflow-wrap: anywhere; }
.udaje dd { margin: 0; min-width: 0; }
.udaje dd code { white-space: normal; overflow-wrap: anywhere; }
dl:not(.udaje) { margin: 0; display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: var(--m-2) var(--m-5); }
dl:not(.udaje) dt { color: var(--text-3); }
dl:not(.udaje) dd { margin: 0; min-width: 0; }

/* ---------- Seznam technických klíčů ---------- */
.klice { list-style: none; margin: 0; padding: 0; columns: 14rem auto; column-gap: var(--m-5); }
.klice li { padding: .15rem 0; break-inside: avoid; }
.klice--radek { columns: auto; display: flex; flex-wrap: wrap; gap: var(--m-1) var(--m-2); }
details > summary { cursor: pointer; color: var(--akcent); font-weight: 600; list-style-position: inside; }
details > summary:hover { color: var(--akcent-tmavy); }
details[open] > summary { margin-bottom: var(--m-3); }
.sbaleno { border-top: 1px solid var(--linka); padding-top: var(--m-3); margin-top: var(--m-3); }

/* ---------- Tabulky ---------- */
.tabulka-obal { overflow-x: auto; background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-m); }
.tabulka { width: 100%; border-collapse: collapse; font-size: var(--t-m); }
.tabulka th, .tabulka td { text-align: left; padding: .65rem var(--m-4); border-bottom: 1px solid var(--linka); vertical-align: middle; }
.tabulka th { color: var(--text-3); font-weight: 600; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; background: var(--plocha-2); }
.tabulka tbody tr:last-child td { border-bottom: 0; }
.tabulka tbody tr:hover { background: var(--plocha-2); }
.tabulka .c { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabulka .nz, label.nz { white-space: nowrap; }
.tabulka .akce { text-align: right; white-space: nowrap; width: 1%; }
.tabulka form { margin: 0; }
.tabulka__hlavni { font-weight: 650; }
.tabulka__pod { display: block; font-size: var(--t-s); color: var(--text-3); }

/* ---------- Tlačítka a formuláře ---------- */
.tlacitko { display: inline-flex; align-items: center; gap: var(--m-2); background: var(--akcent); color: #fff; border: 1px solid var(--akcent); border-radius: var(--r-s); padding: .5rem 1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.tlacitko:visited { color: #fff; }
.tlacitko:hover { background: var(--akcent-tmavy); color: #fff; }
.tlacitko--tiche, .tlacitko--tiche:visited { background: var(--plocha); color: var(--inkoust); border-color: var(--linka-silna); }
.tlacitko--tiche:hover { background: var(--plocha-2); color: var(--inkoust); }
.tlacitko--odkaz, .tlacitko--odkaz:visited { background: none; border: 0; color: var(--akcent); padding: .25rem .4rem; font-weight: 600; }
.tlacitko--odkaz:hover { background: var(--akcent-svetly); color: var(--akcent-tmavy); }
.tlacitko--male { padding: .3rem .7rem; font-size: var(--t-s); }
.tlacitko:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

.formular { display: flex; flex-direction: column; gap: var(--m-3); }
.formular label { display: flex; flex-direction: column; gap: var(--m-1); font-weight: 600; font-size: var(--t-s); }
input, select, textarea { padding: .5rem .6rem; border: 1px solid var(--linka-silna); border-radius: var(--r-s); font: inherit; font-weight: 400; background: var(--plocha); color: var(--inkoust); width: 100%; }
textarea { min-height: 4.5rem; resize: vertical; }
/* Jednořádková hodnota v textarea: zalamuje se, výška podle obsahu (app.js), Enter nový řádek nevloží. */
/* min-height = jeden řádek + padding + rámeček, aby pole nebylo useknuté, když se výška spočítá dřív než rozvržení. */
textarea[data-jednoradkove] { min-height: calc(1.45em + 1rem + 2px); resize: none; overflow: hidden; line-height: 1.45; }

/* Editor: řádek = pole, sloupce = jazyky (nebo paralelní seznam: sloupce = položky). */
.formular-tabulka { width: 100%; border-collapse: collapse; }
.formular-tabulka th, .formular-tabulka td { padding: var(--m-2) var(--m-3); border-bottom: 1px solid var(--linka); vertical-align: top; text-align: left; }
.formular-tabulka th[scope="row"] { width: 14rem; font-weight: 600; }
.formular-tabulka th[scope="row"] small { display: block; font-weight: 400; color: var(--text-3); font-size: var(--t-xs); }
.formular-tabulka thead th { font-size: var(--t-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.zmeneno { background: var(--pozor-pozadi); }
.lista-ulozit { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--m-3); background: var(--plocha); border: 1px solid var(--linka-silna); border-radius: var(--r-m); padding: var(--m-3) var(--m-4); margin-top: var(--m-4); box-shadow: 0 -4px 16px rgba(27, 34, 25, .06); }

/* ---------- Hlášky ---------- */
.hlaska { padding: var(--m-3) var(--m-4); border-radius: var(--r-m); border: 1px solid transparent; margin-bottom: var(--m-4); }
.hlaska p:last-child { margin: 0; }
.hlaska--chyba { background: var(--chyba-pozadi); color: var(--chyba); border-color: #e7c2b6; }
.hlaska--pozor { background: var(--pozor-pozadi); color: var(--pozor); border-color: #ecd7a4; }
.hlaska--ok { background: var(--ok-pozadi); color: var(--ok); border-color: #c7dcbf; }
.prazdne { text-align: center; color: var(--text-3); padding: var(--m-6) var(--m-4); }

.paticka { color: var(--text-3); font-size: var(--t-xs); }

/* ---------- Ukazatel průběhu (běhy na pozadí) ---------- */
.prubeh { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-m); padding: var(--m-4) var(--m-5); margin-bottom: var(--m-4); }
.prubeh__radek { display: flex; justify-content: space-between; gap: var(--m-3); margin-bottom: var(--m-2); font-weight: 600; }
.prubeh__radek span:last-child { color: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.prubeh__pruh { height: .6rem; background: var(--neutral-pozadi); border-radius: 1rem; overflow: hidden; }
.prubeh__vypln { height: 100%; background: var(--akcent); border-radius: 1rem; transition: width .4s ease; }
.prubeh__pruh--bezi .prubeh__vypln { background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%); background-size: 1rem 1rem; animation: prubeh-pohyb 1s linear infinite; }
.prubeh__pozn { margin: var(--m-2) 0 0; color: var(--text-3); font-size: var(--t-s); }
@keyframes prubeh-pohyb { from { background-position: 0 0; } to { background-position: 1rem 0; } }
@media (prefers-reduced-motion: reduce) { .prubeh__pruh--bezi .prubeh__vypln { animation: none; } }

/* ---------- Filtry a řazení seznamů ---------- */
.filtry { display: flex; flex-wrap: wrap; gap: var(--m-2) var(--m-3); align-items: flex-end; background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-m); padding: var(--m-3) var(--m-4); margin-bottom: var(--m-3); }
.filtry label { display: flex; flex-direction: column; gap: var(--m-1); font-size: var(--t-xs); color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.filtry input, .filtry select { width: auto; min-width: 9rem; font-size: var(--t-s); text-transform: none; letter-spacing: 0; color: var(--inkoust); }
.filtry .filtry__hledat input { min-width: 16rem; }
.filtry__akce { display: flex; gap: var(--m-2); align-items: center; margin-left: auto; }
.filtry__pocet { font-size: var(--t-s); color: var(--text-3); margin: 0 0 var(--m-2); }
.razeni, .razeni:visited { color: inherit; text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; white-space: nowrap; }
.razeni:hover { color: var(--inkoust); }
.razeni--aktivni { color: var(--inkoust); }
.razeni__sipka { font-size: .7rem; opacity: .45; }
.razeni--aktivni .razeni__sipka { opacity: 1; color: var(--akcent); }

/* ---------- Překlady (balíček 6) ---------- */
.text-nahled { font-size: var(--t-s); max-width: 26rem; min-width: 12rem; white-space: pre-line; }
.text-radky { margin: 0; padding-left: 1.2rem; white-space: normal; }
.text-radky li + li { margin-top: 2px; }
.zdroj-text { background: var(--plocha-2); border: 1px solid var(--linka); border-radius: var(--r-s); padding: var(--m-3); white-space: pre-line; font-size: var(--t-s); }

/* Kontrola (balíček 5): tabulka rozdílů – hodnoty čitelně široké, akce pod sebou. */
.kontrola__produkt { max-width: 16rem; overflow-wrap: anywhere; }
.kontrola__hodnota { min-width: 10rem; max-width: 26rem; overflow-wrap: anywhere; }
.kontrola__akce { display: flex; flex-direction: column; align-items: stretch; gap: var(--m-1); }
.kontrola__akce .tlacitko { width: 100%; justify-content: center; }

/* Seznamy: posun mezi záznamy, výběr všeho */
.navigace { display: flex; align-items: center; gap: var(--m-2); flex-wrap: wrap; }
.navigace__pozice { font-size: var(--t-s); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.navigace [aria-disabled="true"] { opacity: .4; cursor: default; }
.tabulka th.vyber, .tabulka td.vyber { width: 2rem; text-align: center; }
.tabulka th.vyber input, .tabulka td.vyber input { width: auto; margin: 0; }
.vyber__pocet { font-size: var(--t-s); color: var(--text-3); }

/* ---------- Hlášky (flash) – lepkavé nahoře v obsahu ---------- */
.hlasky { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: var(--m-2); margin-bottom: var(--m-4); }
.hlasky .hlaska { margin: 0; box-shadow: 0 4px 16px rgba(27, 34, 25, .08); }
.hlasky .hlaska { display: flex; align-items: flex-start; gap: var(--m-3); }
.hlasky .hlaska p { flex: 1; margin: 0; }
.hlaska--info { background: var(--neutral-pozadi); color: var(--inkoust); border-color: var(--linka-silna); }
.hlaska__zavrit { background: none; border: 0; color: inherit; font: inherit; font-size: 1.25rem; line-height: 1; padding: 0 var(--m-1); cursor: pointer; opacity: .7; width: auto; }
.hlaska__zavrit:hover { opacity: 1; }
.hlaska--mizi { opacity: 0; transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) { .hlaska--mizi { transition: none; } }
[data-fokus]:focus { outline: 2px solid var(--chyba); outline-offset: 2px; }

/* ---------- Tlačítka: nebezpečná akce, čekání ---------- */
.tlacitko--nebezpecne, .tlacitko--nebezpecne:visited { background: var(--plocha); color: var(--chyba); border-color: #e0b4a8; }
.tlacitko--nebezpecne:hover { background: var(--chyba); color: #fff; border-color: var(--chyba); }
.tlacitko[disabled], .tlacitko[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.tlacitko[aria-busy="true"] { opacity: .85; cursor: progress; }
.tlacitko[aria-busy="true"]::before { content: ""; width: .9em; height: .9em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tocit .7s linear infinite; }
@keyframes tocit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tlacitko[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: .5; } }
.js .filtry__odeslat { display: none; }

/* ---------- Potvrzovací dialog ---------- */
dialog.potvrzeni { border: 1px solid var(--linka-silna); border-radius: var(--r-m); padding: var(--m-5); max-width: 30rem; width: calc(100% - 2rem); color: var(--inkoust); background: var(--plocha); box-shadow: 0 12px 40px rgba(27, 34, 25, .2); }
dialog.potvrzeni::backdrop { background: rgba(27, 34, 25, .35); }
.potvrzeni__text { font-weight: 600; margin-bottom: var(--m-4); white-space: pre-line; }
.potvrzeni__akce { display: flex; justify-content: flex-end; gap: var(--m-2); }
.potvrzeni__akce .tlacitko { width: auto; }

/* ---------- Formuláře: úzký, zaškrtávátko, akce, lišta uložení ---------- */
.formular--uzky { max-width: 36rem; }
.zaskrtavatko, .formular label.zaskrtavatko, .filtry label.zaskrtavatko { flex-direction: row; align-items: center; gap: var(--m-2); text-transform: none; letter-spacing: 0; }
.zaskrtavatko input { width: auto; min-width: 0; margin: 0; }
.formular-akce { display: flex; flex-wrap: wrap; gap: var(--m-2); align-items: center; }
.formular-akce form { margin: 0; }
.lista-ulozit__akce { display: flex; flex-wrap: wrap; gap: var(--m-2); justify-content: flex-end; margin-left: auto; }
.lista-ulozit__pozn { display: flex; flex-direction: column; gap: 2px; }
.lista-ulozit__zmeny:empty { display: none; }
.lista-ulozit__zmeny { color: var(--pozor); font-weight: 600; }
.lista-ulozit--zmeny { border-color: #ecd7a4; background: #fffbf1; }
input.zmeneno, textarea.zmeneno, select.zmeneno { border-color: #d49a1c; background: var(--pozor-pozadi); }
.input--kratky { max-width: 8rem; }

/* ---------- Tabulky, karty, kroky ---------- */
.tabulka tr.neaktivni td { opacity: .6; }
.tabulka tr:target td { background: var(--akcent-svetly); }
.karta--uzka { max-width: 36rem; }
.karta--vybrana { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent); }
.karta--dal { border-color: #c7dcbf; background: #f7fbf5; }
.karta--nebezpeci { border-color: #e7c2b6; }
.karta + .lista-ulozit, .karta + .navigace { margin-top: var(--m-4); }
.kroky { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--m-2) var(--m-4); align-items: center; }
.kroky li { display: flex; gap: var(--m-2); align-items: center; }
.mezera-nahore { margin-top: var(--m-4); }
.mezera-dole { margin-bottom: var(--m-4); }
.radek-akci { display: flex; flex-wrap: wrap; gap: var(--m-2); align-items: center; }
.inline { display: inline; }

/* ---------- Nápověda (dlouhé vysvětlivky) ---------- */
details.napoveda { font-size: var(--t-s); color: var(--text-2); margin: 0 0 var(--m-4); }
details.napoveda > summary { font-weight: 600; font-size: var(--t-s); }
details.napoveda[open] { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-m); padding: var(--m-3) var(--m-4); }
details.napoveda p:last-child { margin-bottom: 0; }
.pre { white-space: pre-wrap; font-size: .85em; font-family: var(--pismo-kod); }

/* ---------- Radio karty (volba režimu) ---------- */
.volby { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--m-3); border: 0; margin: 0; padding: 0; }
.volby legend { font-weight: 600; font-size: var(--t-s); margin-bottom: var(--m-2); padding: 0; }
.volba { display: flex; gap: var(--m-2); align-items: flex-start; border: 1px solid var(--linka-silna); border-radius: var(--r-m); padding: var(--m-3); cursor: pointer; font-weight: 400; }
.formular .volba { flex-direction: row; font-weight: 400; }
.volba input { width: auto; margin: .25rem 0 0; }
.volba strong { display: block; }
.volba:has(input:checked) { border-color: var(--akcent); background: var(--akcent-svetly); }

/* ---------- Jazykové záložky Překladů s počty ---------- */
.zalozky .pocet--pozor { background: var(--pozor-pozadi); color: var(--pozor); }
.zalozky .pocet--info { background: var(--akcent-svetly); color: var(--akcent-tmavy); }
a.metrika { text-decoration: none; color: inherit; display: block; }
a.metrika:visited { color: inherit; }
a.metrika:hover { border-color: var(--linka-silna); background: var(--plocha-2); }
a.metrika[aria-current="true"] { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent); }
.zaskrtavatko--nahore { align-items: flex-start; font-weight: 400; }
.zaskrtavatko--nahore input { margin-top: .3rem; }
.lista-ulozit--nahore { position: static; margin: 0 0 var(--m-3); box-shadow: none; }
.formular--siroky { max-width: 52rem; }
.volba .pozn { display: block; font-weight: 400; }
.normalni { font-weight: 400; }
.tabulka__pod--normal { text-transform: none; letter-spacing: 0; }
.lista-ulozit__pole { flex: 1; margin: 0; display: flex; }
.vizualne-skryte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lista-ulozit { flex-wrap: wrap; }
.lista-ulozit__pozn { flex: 1 1 16rem; min-width: 0; }
.lista-ulozit__akce { flex: 0 1 auto; }
.mrizka--prehled { grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); }
@media (max-width: 40rem) { .mrizka--prehled { grid-template-columns: minmax(0, 1fr); } }
.input--cislo { max-width: 10rem; }
.input--stredni { max-width: 16rem; }
.input--auto { width: auto; }
details.karta > summary { font-size: var(--t-l); color: var(--inkoust); }
details.karta > summary .pozn { font-size: var(--t-s); }
details.karta[open] > summary { margin-bottom: var(--m-3); }
.karta + details.karta, details.karta + .karta { margin-top: var(--m-4); }
.kod-zalomit { white-space: normal; overflow-wrap: anywhere; }
.filtry input.input--kratke { min-width: 6rem; }

/* ---------- Překlady: pevná tabulka, zkrácené náhledy, stránkování, fronta ---------- */
.stav--kontrola, .stitek--kontrola { background: var(--kontrola-pozadi); color: var(--kontrola); }
.metrika--kontrola { border-top-color: var(--kontrola); }
.zalozky .pocet--prace { background: var(--kontrola-pozadi); color: var(--kontrola); font-weight: 600; }
.zalozky .pocet--chybi { background: none; color: var(--text-3); padding: 0; }
.tabulka--preklady, .tabulka--produkty { table-layout: fixed; }
.tabulka--produkty th { white-space: normal; }
.tabulka--produkty td { overflow-wrap: anywhere; }
.tabulka--preklady th, .tabulka--preklady td { padding-left: var(--m-3); padding-right: var(--m-3); vertical-align: top; }
.tabulka--preklady .sl-vyber { width: 2.5rem; }
.tabulka--preklady .sl-nazev { width: 20%; }
.tabulka--preklady .sl-pole { width: 13%; }
.tabulka--preklady .sl-stav { width: 8.5rem; }
.tabulka--preklady th { white-space: normal; }
.tabulka--preklady .text-nahled { max-width: none; min-width: 0; }
.zalomit, .tabulka td.zalomit { overflow-wrap: anywhere; min-width: 0; }
.text-nahled { overflow-wrap: anywhere; }
.klamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.klamp .text-radky { padding-left: 1rem; }
.klamp--2 { -webkit-line-clamp: 2; line-clamp: 2; }
.jeden-radek { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strankovani { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-1) var(--m-2); margin-top: var(--m-3); }
.strankovani__cislo { min-width: 2rem; text-align: center; padding: .2rem .4rem; border-radius: var(--r-s); font-variant-numeric: tabular-nums; }
a.strankovani__cislo { text-decoration: none; }
a.strankovani__cislo:hover { background: var(--akcent-svetly); }
.strankovani__cislo[aria-current="page"] { background: var(--akcent); color: #fff; font-weight: 650; }
.strankovani__mezera { color: var(--text-3); }
.strankovani .pozn { margin-left: auto; }
/* lišta hromadných akcí: s JS jen při výběru */
.js .lista-ulozit--vyber:not(.lista-ulozit--aktivni) { display: none; }

/* ---------- Položka překladu: rozdíl češtiny, tvary, počet znaků, souvislosti ---------- */
.rozdil { background: var(--plocha); color: var(--inkoust); border-radius: var(--r-s); padding: var(--m-2) var(--m-3); white-space: pre-line; font-size: var(--t-s); }
.rozdil ins { background: var(--ok-pozadi); color: var(--ok); text-decoration: none; font-weight: 600; }
.rozdil del { background: var(--chyba-pozadi); color: var(--chyba); }
dl.tvary { grid-template-columns: fit-content(40%) minmax(0, 1fr); background: var(--plocha-2); border: 1px solid var(--linka); border-radius: var(--r-s); padding: var(--m-3); font-size: var(--t-s); }
.pocet-znaku { margin: 0; color: var(--text-3); font-weight: 400; }
.pocet-znaku--dlouhe { color: var(--pozor); font-weight: 600; }
.lista-ulozit--polozka .lista-ulozit__pozn { gap: var(--m-1); }
.lista-ulozit--polozka .lista-ulozit__akce { align-items: center; }
.tabulka--kompaktni { table-layout: fixed; font-size: var(--t-s); }
.tabulka--kompaktni th, .tabulka--kompaktni td { padding: .4rem var(--m-2); vertical-align: top; }
.tabulka--kompaktni .sl-pole { width: 22%; }
.tabulka--kompaktni .sl-stav { width: 8.5rem; }
.souvislosti .karta__hlava h2 { font-size: var(--t-m); }

/* ---------- Žurnál: čitelné změny ---------- */
.tabulka--zurnal { table-layout: fixed; }
.tabulka--zurnal th, .tabulka--zurnal td { vertical-align: top; padding-left: var(--m-3); padding-right: var(--m-3); }
.tabulka--zurnal .sl-kdy { width: 8rem; }
.tabulka--zurnal .sl-kdo { width: 5rem; }
.tabulka--zurnal .sl-co { width: 17%; }
.tabulka--zurnal .sl-pole { width: 13%; }
.tabulka--zurnal .sl-beh { width: 3.5rem; }
.zurnal__dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-3); }
.zurnal__popisek { display: block; font-size: var(--t-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.zurnal__text { white-space: pre-line; overflow-wrap: anywhere; }
.klamp--4 { -webkit-line-clamp: 4; line-clamp: 4; }
.tabulka--zurnal ins, .zurnal__zmeny ins { background: var(--ok-pozadi); color: var(--ok); text-decoration: none; }
.tabulka--zurnal del, .zurnal__zmeny del { background: var(--chyba-pozadi); color: var(--chyba); }
.zurnal__zmeny { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }
.zurnal__technicke { margin-top: var(--m-1); }
.zurnal__technicke > summary { font-weight: 400; font-size: var(--t-xs); color: var(--text-3); }
.zurnal__technicke dl { font-size: var(--t-xs); }

/* ---------- Slovník: volba sloupců jazyků, pevná tabulka ---------- */
.filtry__sloupce { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--m-1) var(--m-3); align-items: center; }
.filtry__sloupce legend { font-size: var(--t-xs); color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0; margin-bottom: var(--m-1); }
.filtry__sloupce legend .normalni { text-transform: none; letter-spacing: 0; }
.filtry .filtry__sloupce label.zaskrtavatko { font-size: var(--t-s); color: var(--inkoust); font-weight: 400; }
.tabulka--slovnik { table-layout: fixed; }
.tabulka--slovnik th, .tabulka--slovnik td { vertical-align: top; padding-left: var(--m-3); padding-right: var(--m-3); }
.tabulka--slovnik .sl-klic { width: 18%; }
.tabulka--slovnik .sl-odkud { width: 16%; }
.tabulka--slovnik th { white-space: normal; }
.text-nahled:has(> .klamp) { white-space: normal; }
.text-nahled > .klamp { white-space: pre-line; }

/* ---------- Řady: úzké sloupce jazyků ---------- */
.tabulka--rady th, .tabulka--rady td { padding-left: var(--m-2); padding-right: var(--m-2); }
.tabulka--rady th:first-child, .tabulka--rady td:first-child { padding-left: var(--m-4); }
.tabulka--rady th.jazyk, .tabulka--rady td.c { padding-left: .35rem; padding-right: .35rem; }
.tabulka--rady .stav { white-space: nowrap; }

/* ---------- Editory řady a produktu: český zdroj u cizího jazyka ---------- */
.hlava--editor { align-items: flex-start; flex-wrap: nowrap; }
.hlava--editor .hlava__titul { flex: 1 1 auto; min-width: 0; }
.hlava--editor .hlava__akce { flex: 0 1 auto; }
@media (max-width: 52rem) { .hlava--editor { flex-wrap: wrap; } }
.zdroj-cs { font-size: var(--t-s); color: var(--text-3); margin-bottom: var(--m-1); display: flex; gap: var(--m-2); align-items: baseline; flex-wrap: wrap; }
.zdroj-cs__text { white-space: pre-line; overflow-wrap: anywhere; }
.zdroj-cs__text::before { content: "cs: "; font-weight: 600; }
.zdroj-cs a { text-decoration: none; }
details.napoveda--pole { margin: var(--m-1) 0 0; }
details.napoveda--pole > summary { font-weight: 400; color: var(--text-3); font-size: var(--t-xs); }

/* ---------- Drobnosti: zaškrtávátka, seznam šablon ---------- */
.zaskrtavatko input[type="checkbox"], .zaskrtavatko input[type="radio"] { width: 1rem; height: 1rem; flex: none; padding: 0; }
.formular label.zaskrtavatko--nahore, .filtry label.zaskrtavatko--nahore { align-items: flex-start; font-weight: 400; }
.zaskrtavatko--nahore input[type="checkbox"] { margin-top: .2rem; }
.seznam--radky { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--m-1); }
.volby { align-items: start; }

/* Obsah storu (balíček 15e): editor sekcí. */
.pole-obsahu th[scope="row"] { width: 16rem; }
.pole-obsahu .cz-hodnota { width: 26%; color: var(--text-2); font-size: var(--t-s); }
.pole-obsahu .cz-hodnota .zdroj-cs__text::before { content: ""; }
.formular-tabulka tr.oddelovac th { background: var(--plocha-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding-top: var(--m-3); }
.formular-tabulka tr.blok-hlava th { padding-top: var(--m-4); border-bottom: 2px solid var(--linka-silna); }
.nahled-html { border: 1px dashed var(--linka); border-radius: var(--r-s); padding: var(--m-2) var(--m-3); margin-top: var(--m-1); }
.nahled-html p { margin: 0 0 .3em; }
.karta--vypnuta { opacity: .75; }
.tabulka tr.aktualni td { background: var(--ok-pozadi); }

/* ---------- Editor obsahu storu (balíček 16, varianta A): osnova + sbalitelné sekce ---------- */
.editor-obsahu { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--m-5); align-items: start; }
.editor-obsahu [hidden], .js-jen[hidden] { display: none !important; }
.editor-obsahu .sekce, .editor-obsahu .karta { min-width: 0; overflow-x: clip; }
.editor-obsahu code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.editor-obsahu .stav--obrys { background: transparent; box-shadow: inset 0 0 0 1px var(--linka-silna); }
.editor-obsahu .stav--shoda { background: transparent; color: var(--text-3); font-weight: 500; padding-left: 0; }
.editor-obsahu .stav--shoda::before { display: none; }
.editor-obsahu .odznaky { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.editor-obsahu details > summary { cursor: pointer; list-style: none; }
.editor-obsahu details > summary::-webkit-details-marker { display: none; }
.editor-obsahu .sipka { width: 1rem; height: 1rem; display: inline-grid; place-items: center; color: var(--text-3); transition: transform .15s; flex: none; }
.editor-obsahu .sipka::before { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.editor-obsahu details[open] > summary > .sipka { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .editor-obsahu .sipka { transition: none; } }

/* Osnova */
.osnova { position: sticky; top: var(--m-4); max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-m); padding: var(--m-3); display: flex; flex-direction: column; gap: var(--m-3); }
.osnova__souhrn { display: flex; flex-wrap: wrap; gap: 4px; }
.osnova__seznam > summary { font-size: var(--t-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.osnova ol { list-style: none; margin: var(--m-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.osnova li a { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: 0 var(--m-2); padding: .35rem var(--m-2); border-radius: var(--r-s); color: var(--inkoust); text-decoration: none; font-size: var(--t-s); }
.osnova li a:hover { background: var(--plocha-2); }
.osnova li a[aria-current="true"] { background: var(--akcent-svetly); }
.osnova li a .c { color: var(--text-3); font-variant-numeric: tabular-nums; }
.osnova li a .odznaky { grid-column: 2; margin-top: 2px; }
.osnova li a .stav { font-size: 11px; padding: 0 .4rem; }
.osnova__pata { border-top: 1px solid var(--linka); padding-top: var(--m-2); font-size: var(--t-s); }
.editor-obsahu .filtr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; background: var(--neutral-pozadi); border-radius: var(--r-m); }
.editor-obsahu .filtr label { position: relative; }
.editor-obsahu .filtr input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.editor-obsahu .filtr span { display: flex; justify-content: center; padding: .25rem .4rem; border-radius: .5rem; font-size: var(--t-xs); cursor: pointer; color: var(--text-2); }
.editor-obsahu .filtr input:checked + span { background: var(--plocha); color: var(--inkoust); font-weight: 650; box-shadow: 0 1px 2px rgba(27, 34, 25, .08); }
.editor-obsahu .filtr input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 1px; }

/* Co řešit, nástroje */
.co-resit { padding: var(--m-3) var(--m-4); border-left: 4px solid var(--kontrola); }
.co-resit > summary { display: flex; flex-wrap: wrap; gap: var(--m-2); align-items: center; }
.co-resit ul { list-style: none; margin: var(--m-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.co-resit li a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--m-2); align-items: baseline; padding: .3rem var(--m-2); border-radius: var(--r-s); text-decoration: none; color: var(--inkoust); font-size: var(--t-s); }
.co-resit li a:hover { background: var(--plocha-2); }
.co-resit li .stav { justify-self: start; }
.co-resit .cesta { overflow-wrap: anywhere; color: var(--text-2); }
.co-resit .cesta q { color: var(--text-3); }
.editor-obsahu .nastroje { display: flex; flex-wrap: wrap; gap: var(--m-2) var(--m-3); align-items: center; margin: var(--m-3) 0 0; }
.editor-obsahu .nastroje__vpravo { margin-left: auto; display: flex; gap: var(--m-1); }

/* Sekce */
.editor-obsahu .sekce { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-m); margin-top: var(--m-3); scroll-margin-top: var(--m-4); }
.editor-obsahu .sekce + .sekce { margin-top: var(--m-3); }
.editor-obsahu .sekce > summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--m-1) var(--m-3); align-items: center; padding: var(--m-3) var(--m-4); }
.editor-obsahu .sekce[open] > summary { border-bottom: 1px solid var(--linka); }
.sekce__cislo { font-variant-numeric: tabular-nums; color: var(--text-3); font-weight: 600; font-size: var(--t-s); min-width: 1.2rem; }
.sekce__titul { min-width: 0; display: flex; flex-direction: column; }
.sekce__nazev { font-weight: 650; }
.sekce__shrnuti { font-size: var(--t-s); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-obsahu .sekce[open] > summary .sekce__shrnuti { white-space: normal; }
.editor-obsahu .sekce--kompaktni { background: var(--plocha-2); border-style: dashed; }
.editor-obsahu .sekce--kompaktni > summary { padding-top: var(--m-2); padding-bottom: var(--m-2); }
.editor-obsahu .sekce--vypnuta .sekce__nazev { opacity: .65; text-decoration: line-through; text-decoration-thickness: 1px; }
.editor-obsahu .sekce--chybi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--m-1) var(--m-3); align-items: center; padding: var(--m-3) var(--m-4); background: transparent; border: 1px dashed var(--linka-silna); }
.editor-obsahu .sekce--chybi .sekce__nazev { color: var(--text-2); }
.sekce__chybi-pozn { grid-column: 2 / -1; margin: 0; }
.osnova__chybi a .n { color: var(--text-3); font-style: italic; }
.editor-obsahu .sekce--vybrana { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent); }
.sekce__telo { padding: var(--m-3) var(--m-4); container-type: inline-size; }
.sekce__meta { font-size: var(--t-s); color: var(--text-3); }

/* Skupiny polí a bloky */
.editor-obsahu .skupina { border-top: 1px solid var(--linka); }
.editor-obsahu .skupina > summary { display: flex; flex-wrap: wrap; gap: var(--m-1) var(--m-2); align-items: center; padding: var(--m-2) 0; font-size: var(--t-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.editor-obsahu .skupina .pocet { color: var(--text-3); font-weight: 500; }
.skupina__stav { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-3); }
.skupina__obsah { padding-bottom: var(--m-2); }
.editor-obsahu .oddil { font-size: var(--t-xs); color: var(--text-3); margin: var(--m-3) 0 0; font-weight: 600; }
.editor-obsahu .bloky { display: flex; flex-direction: column; gap: var(--m-2); }
.editor-obsahu .blok { border: 1px solid var(--linka); border-radius: var(--r-s); background: var(--plocha-2); }
.editor-obsahu .blok > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--m-1) var(--m-2); align-items: center; padding: var(--m-2) var(--m-3); font-size: var(--t-s); }
.editor-obsahu .blok[open] > summary { border-bottom: 1px solid var(--linka); }
.blok__shrnuti { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
.blok__shrnuti strong { color: var(--inkoust); }
.blok__telo { padding: 0 var(--m-3) var(--m-2); background: var(--plocha); border-radius: 0 0 var(--r-s) var(--r-s); }
.editor-obsahu .blok--appka { padding: var(--m-2) var(--m-3); border-style: dashed; }

/* Pole: 3 sloupce na širokém kontejneru, pod sebou na úzkém */
.editor-obsahu .pole { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(10rem, 17rem); gap: var(--m-1) var(--m-4); padding: var(--m-2) 0; border-top: 1px dashed var(--linka); align-items: start; scroll-margin-top: var(--m-6); }
.editor-obsahu .skupina__obsah > .pole:first-child, .editor-obsahu .oddil + .pole, .editor-obsahu .blok__telo > .pole:first-child { border-top: 0; }
.pole__nazev label { font-weight: 600; font-size: var(--t-s); }
.pole__nazev small { display: block; color: var(--text-3); font-size: var(--t-xs); overflow-wrap: anywhere; }
.pole__hodnota { min-width: 0; display: flex; flex-direction: column; gap: var(--m-1); }
.pole__radek { display: flex; gap: var(--m-2); align-items: center; }
.pole__radek input[type="number"] { max-width: 8rem; }
.pole__predloha { min-width: 0; font-size: var(--t-s); color: var(--text-2); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pole__predloha-stitek { display: none; font-size: var(--t-xs); color: var(--text-3); font-weight: 600; }
.pole__predloha-text { overflow-wrap: anywhere; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pole__predloha .radek-akci { margin-left: -.35rem; gap: 2px; }
.editor-obsahu .pole .zmeneno { border-color: #d49a1c; background: #fffbf1; }
.chybi-odkaz { font-size: var(--t-xs); color: var(--chyba); display: flex; gap: .35rem; align-items: baseline; flex-wrap: wrap; }
.pole-napoveda { margin: var(--m-2) 0 0; }
.pole--blik { animation: pole-blik 1.6s ease-out; border-radius: var(--r-s); }
@keyframes pole-blik { 0% { background: var(--akcent-svetly); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .pole--blik { animation: none; outline: 2px solid var(--akcent); } }
@container (max-width: 44rem) {
  .editor-obsahu .pole { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pole__predloha { padding-left: var(--m-2); border-left: 2px solid var(--linka); }
  .pole__predloha-stitek { display: inline; }
}
.editor-obsahu .historie { margin-top: var(--m-5); }
.editor-obsahu .historie > summary { display: flex; flex-wrap: wrap; gap: var(--m-2); align-items: center; }
.editor-obsahu .historie[open] > summary { margin-bottom: var(--m-3); }

@media (max-width: 75rem) {
  .editor-obsahu { grid-template-columns: minmax(0, 1fr); gap: var(--m-3); }
  .osnova { position: static; max-height: none; }
}
@media (max-width: 36rem) {
  .editor-obsahu .sekce > summary, .editor-obsahu .sekce--chybi { grid-template-columns: auto minmax(0, 1fr); }
  .editor-obsahu .sekce--chybi .odznaky, .sekce__chybi-pozn { grid-column: 1 / -1; }
  .editor-obsahu .sekce > summary .odznaky { grid-column: 1 / -1; }
  .editor-obsahu .sekce > summary .sekce__cislo { display: none; }
  .co-resit li a { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sekce__telo { padding: var(--m-3); }
}

/* ---------- Balíček 18: přehled šablon storu a vrstva nad předlohou (varianta A z prototypu) ---------- */
.stav--obrys { background: transparent; box-shadow: inset 0 0 0 1px var(--linka-silna); color: var(--text-2); }
.stav--obrys::before { display: none; }
.stav--male { font-size: 11px; padding: 0 .4rem; }

/* Přepínač zapnuto / vypnuto (checkbox role=switch; bez JS tlačítko Uložit vedle) */
.prepinac { display: inline-flex; align-items: center; gap: var(--m-2); cursor: pointer; font-size: var(--t-s); white-space: nowrap; user-select: none; position: relative; }
.prepinac input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prepinac__drah { width: 2.25rem; height: 1.3rem; border-radius: 1rem; background: var(--linka-silna); position: relative; flex: none; transition: background .15s; }
.prepinac__drah::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(27, 34, 25, .25); transition: transform .15s; }
.prepinac input:checked + .prepinac__drah { background: var(--akcent); }
.prepinac input:checked + .prepinac__drah::after { transform: translateX(.95rem); }
.prepinac input:focus-visible + .prepinac__drah { outline: 2px solid var(--akcent); outline-offset: 2px; }
.prepinac input:disabled + .prepinac__drah { opacity: .5; }
.prepinac input:disabled ~ .prepinac__text { color: var(--text-3); }
.prepinac__text { color: var(--text-2); }
.prepinac input:checked ~ .prepinac__text { color: var(--inkoust); font-weight: 600; }
.prepinac--zamceno { cursor: default; }
@media (prefers-reduced-motion: reduce) { .prepinac__drah, .prepinac__drah::after { transition: none; } }
.prepinac-form { display: inline-flex; align-items: center; gap: var(--m-2); margin: 0; }
.js .prepinac-form .prepinac-form__ulozit { display: none; }

.story-zalozky { margin-bottom: var(--m-4); }
.story-zalozky a small { color: var(--text-3); font-weight: 400; }

/* Primární šablony jako karty */
.primarni { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--m-3); margin-bottom: var(--m-5); }
.primarni .karta { display: flex; flex-direction: column; gap: var(--m-2); padding: var(--m-4); margin: 0; }
.primarni .karta + .karta { margin-top: 0; }
.primarni h3 { font-size: var(--t-l); margin: 0; }
.primarni__hlava { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--m-2); }
.primarni__stavy { display: flex; flex-wrap: wrap; gap: 4px; }
.primarni__pata { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--m-2); flex-wrap: wrap; padding-top: var(--m-2); border-top: 1px solid var(--linka); }
.ukazatel { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-xs); color: var(--text-3); }
.ukazatel__pruh { height: .4rem; background: var(--neutral-pozadi); border-radius: 1rem; overflow: hidden; display: flex; }
.ukazatel__pruh span { display: block; height: 100%; }
.ukazatel__pruh .u-ok { background: var(--ok); }
.ukazatel__pruh .u-pozor { background: #d49a1c; }
.ukazatel__pruh .u-kontrola { background: var(--kontrola); opacity: .55; }

.nadpis-oddilu { display: flex; justify-content: space-between; align-items: baseline; gap: var(--m-3); flex-wrap: wrap; margin: var(--m-5) 0 var(--m-3); }
.nadpis-oddilu h2 { margin: 0; }
.nadpis-oddilu p { margin: 0; color: var(--text-3); font-size: var(--t-s); }

/* Skupina šablon a řádek šablony */
.sipka { width: 1rem; height: 1rem; display: inline-grid; place-items: center; color: var(--text-3); transition: transform .15s; flex: none; }
.sipka::before { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
details[open] > summary > .sipka { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .sipka { transition: none; } }
details.skupina-sablon { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-m); margin-bottom: var(--m-3); overflow: clip; }
details.skupina-sablon > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-1) var(--m-3); padding: var(--m-3) var(--m-4); cursor: pointer; list-style: none; background: var(--plocha-2); }
details.skupina-sablon > summary::-webkit-details-marker { display: none; }
details.skupina-sablon[open] > summary { border-bottom: 1px solid var(--linka); }
.skupina-sablon__nazev { font-weight: 650; }
.skupina-sablon__souhrn { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.sablona { display: grid; grid-template-columns: 1.5rem minmax(0, 1.6fr) 8rem minmax(0, 1.5fr) 7rem auto; gap: var(--m-1) var(--m-3); align-items: center; padding: var(--m-2) var(--m-4); border-top: 1px solid var(--linka); }
.sablona:first-of-type { border-top: 0; }
.sablona:hover { background: var(--plocha-2); }
.sablona.hlavicka-radku { padding-top: var(--m-1); padding-bottom: var(--m-1); background: var(--plocha); font-size: var(--t-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.sablona.hlavicka-radku:hover { background: var(--plocha); }
.sablona__vyber input { width: auto; margin: 0; }
.sablona__nazev { min-width: 0; display: flex; flex-direction: column; }
.sablona__nazev strong { font-weight: 600; }
.sablona__nazev code { align-self: flex-start; font-size: .78em; margin-top: 1px; white-space: normal; overflow-wrap: anywhere; }
.sablona__stav { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.sablona__pouziti { font-size: var(--t-s); color: var(--text-2); font-variant-numeric: tabular-nums; }
.sablona__pouziti small { display: block; color: var(--text-3); font-size: var(--t-xs); }
.sablona__akce { text-align: right; white-space: nowrap; }
.sablona--vypnuta .sablona__nazev strong { color: var(--text-2); }
.sablona--vypnuta { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(205, 213, 198, .18) 8px 16px); }
.sablona[hidden] { display: none; }
@media (max-width: 52rem) {
  .sablona { grid-template-columns: 1.5rem minmax(0, 1fr) auto; grid-template-areas: "v n a" ". s s" ". p z"; padding: var(--m-3); }
  .sablona.hlavicka-radku { display: none; }
  .sablona__vyber { grid-area: v; align-self: start; padding-top: 2px; }
  .sablona__nazev { grid-area: n; }
  .sablona__akce { grid-area: a; align-self: start; }
  .sablona__stav { grid-area: s; }
  .sablona__pouziti { grid-area: p; }
  .sablona__zapnuti { grid-area: z; justify-self: end; }
  .sablona__pouziti small { display: inline; }
}
.hromadne { position: sticky; bottom: var(--m-3); z-index: 5; display: flex; flex-wrap: wrap; gap: var(--m-2) var(--m-3); align-items: center; background: var(--inkoust); color: #fff; border-radius: var(--r-m); padding: var(--m-2) var(--m-4); margin-top: var(--m-3); box-shadow: 0 4px 16px rgba(27, 34, 25, .2); }
.hromadne[hidden] { display: none; }
.hromadne .tlacitko--tiche { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.hromadne .tlacitko--tiche:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hromadne__vpravo { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--m-2); }
@media (max-width: 36rem) {
  .filtry { flex-direction: column; align-items: stretch; }
  .filtry label, .filtry input, .filtry select, .filtry .filtry__hledat input { min-width: 0; width: 100%; }
  .filtry__akce { margin-left: 0; }
  .metriky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrika__hodnota { font-size: 1.4rem; }
}

/* Editor: stavy polí (dědí / nelokalizováno / lokalizováno / předloha se změnila) */
.editor-obsahu .pole { position: relative; }
.editor-obsahu .pole::before { content: ""; position: absolute; left: calc(-1 * var(--m-3)); top: var(--m-2); bottom: var(--m-2); width: 3px; border-radius: 2px; background: transparent; }
.editor-obsahu .pole--lokal::before { background: var(--ok); }
.editor-obsahu .pole--zmena::before { background: #d49a1c; }
.editor-obsahu .pole--nelok::before { background: var(--kontrola); opacity: .7; }
.editor-obsahu .pole--dedi input[type="text"], .editor-obsahu .pole--dedi textarea, .editor-obsahu .pole--nelok input[type="text"], .editor-obsahu .pole--nelok textarea { background: var(--plocha-2); border-style: dashed; }
.stav-pole { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.zmena-predlohy { background: var(--pozor-pozadi); border-radius: var(--r-s); padding: var(--m-2); display: flex; flex-direction: column; gap: 4px; font-size: var(--t-s); color: var(--inkoust); }
.zmena-predlohy del { color: var(--text-3); text-decoration-color: var(--chyba); }
.zmena-predlohy ins { text-decoration: none; background: var(--plocha); border-radius: 3px; padding: 0 .2rem; }
.zmena-predlohy__popis { font-size: var(--t-xs); color: var(--pozor); font-weight: 600; }
.legenda-poli { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--m-2) var(--m-4); font-size: var(--t-s); margin: var(--m-2) 0 0; }
.legenda-poli div { padding-left: var(--m-3); border-left: 3px solid var(--linka-silna); }
.legenda-poli .l-lokal { border-left-color: var(--ok); }
.legenda-poli .l-zmena { border-left-color: #d49a1c; }
.legenda-poli .l-nelok { border-left-color: var(--kontrola); }
.legenda-poli .l-dedi { border-left-style: dashed; }
.editor-obsahu .sekce > summary { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
.sekce__zapnuti, .blok__zapnuti { justify-self: end; }
.editor-obsahu .blok > summary { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.editor-obsahu .blok--vypnuty > summary { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(205, 213, 198, .25) 8px 16px); }
.editor-obsahu .blok--vypnuty .blok__shrnuti strong { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.editor-obsahu .sekce--nova { border: 1px dashed #d49a1c; }
.osnova li.osnova__nova a .n { color: var(--pozor); font-style: italic; }
.osnova li.osnova__vypnuta a .n { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.hlava-sablony { display: flex; flex-wrap: wrap; gap: var(--m-2) var(--m-4); align-items: center; background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-m); padding: var(--m-2) var(--m-4); margin-bottom: var(--m-4); font-size: var(--t-s); }
.hlava-sablony__vpravo { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--m-2); align-items: center; min-width: 0; max-width: 100%; }
.hlava-sablony__vpravo select { width: auto; min-width: 0; flex: 1 1 12rem; max-width: 100%; font-size: var(--t-s); padding: .3rem .5rem; }
.co-resit li a { grid-template-columns: 11.5rem minmax(0, 1fr); }
@media (max-width: 36rem) {
  .editor-obsahu .sekce > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .editor-obsahu .sekce > summary .sekce__zapnuti { grid-column: 3; grid-row: 1; }
  .editor-obsahu .blok > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .editor-obsahu .blok > summary .odznaky { grid-column: 2 / -1; }
  .hlava-sablony__vpravo { margin-left: 0; }
  .editor-obsahu .pole::before { left: calc(-1 * var(--m-2)); }
  .co-resit li a { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Výběr obrázku storu */
.obrazek-pole { display: flex; flex-wrap: wrap; gap: var(--m-2); align-items: center; }
.obrazek-pole img { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--linka); background: var(--plocha-2); }
.vyber-obrazku { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); }
.vyber-obrazku__mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--m-2); max-height: 60vh; overflow: auto; margin: var(--m-3) 0; }
.vyber-obrazku__mrizka button { display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-s); cursor: pointer; font-size: var(--t-xs); color: var(--text-2); text-align: left; overflow-wrap: anywhere; }
.vyber-obrazku__mrizka button:hover, .vyber-obrazku__mrizka button:focus-visible { border-color: var(--akcent); }
.vyber-obrazku__mrizka img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: var(--plocha-2); }