/* ══════════════════════════════════════════════════════════════════════════════════════════
   KNIHOVNA PODOB (ADR-0131) — jedno místo, kde bydlí vzhled sdílených prvků.

   PROČ GLOBÁLNÍ LIST A NE SCOPED CSS KOMPONENT: prvky knihovny dostávají obsah jako
   `RenderFragment` od volajícího (`<th>`, `<td>`, `<tr>`). Ten se kompiluje do KOMPONENTY
   VOLAJÍCÍHO, takže nese jeho scope — scoped pravidlo prvku by na něj nedopadlo a tabulka by
   se vykreslila bez linek a odsazení. Týž důvod a týž vzor jako `dialog.css`,
   `karta-sekce.css` a `upravitelna-hodnota.css`.

   CO SE TU NEOPAKUJE: hustota a linky samotné tabulky zůstávají v `tabulka.css` (`.tabulka`,
   `.tabulka.je-vzdusna`) — knihovna je jen POJMENOVÁVÁ jako podoby, nepíše je podruhé. Dvě
   sady čísel pro touž věc jsou přesně to, čemu se tady předchází.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── TABULKA ──────────────────────────────────────────────────────────────────────────────
   Obal je podoba ze záložky Majetek na kartě klienta (pokyn uživatele 18. 9. 2026: „prozatím
   stejného designu jako ta, co je na kartě majetek u klienta") — bílá plocha, vlasový rámeček,
   velké zaoblení a jemný stín.

   ROLUJE SE JEN VODOROVNĚ. Svisle roluje STRÁNKA: `overflow-y` na obalu by z něj udělal
   rolovací kontejner a přilepené záhlaví (`position: sticky` v `tabulka.css`) by se přilepilo
   k němu, tedy nikam. Tabulka, která má mít vlastní svislé rolování a slepenou hlavičku, má
   dodnes vlastní obal `.tabulka-obal` (32 míst) — ten se knihovnou NENAHRAZUJE, je to jiný
   prvek s jiným chováním. */
.kn-tabulka {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

.kn-tabulka .tabulka { width: 100%; }

/* Tabulka uvnitř karty už rámeček má — druhý by z ní udělal krabici v krabici. */
.kn-tabulka.je-bez-obalu {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ČÍSLO VPRAVO, i v záhlaví. `tabulka.css` zarovnává buňku, ale hlavičku ne — a popisek nad
   číslem zarovnaný doleva vypadá jako jiný sloupec (nález ze záložky Majetek). */
.kn-tabulka th.sl-cislo { text-align: right; }

/* ── TABULKA: ŘAZENÍ A HLEDÁNÍ VE SLOUPCÍCH ────────────────────────────────────────────────
   1:1 s návrhem 24. 9. 2026 (`th.srt`, `.sar`, `th.tbql`, `.tbqb`, `.tbi`, `.pick.qp`, `.qpin`,
   `.tfbar`; ADR-0158 §A5, §A7, §A12, ADR-0161 §20). Prvky skládá volající z `TabulkaHledani/`,
   takže pravidla nesmí stát jen pod `.kn-tabulka`: seznam Klientů je na nich dřív, než přejde
   na knihovní obal (E12). Čísla jsou z návrhu, barvy z tokenů.

   ZÁHLAVÍ: popisek je tlačítko `.kn-srt` přes celou buňku — řazení musí jít i z klávesnice,
   a buňka záhlaví zastávkou tabulátoru není. Šipka drží místo i bez řazení (`opacity: 0`),
   aby hlavička při přeřazení neposkočila; vzestupně se otočí o 180°. */
.kn-srt {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    color: inherit;
    cursor: pointer;
}

th.srt { cursor: pointer; user-select: none; }
th.srt:hover { color: var(--brown-600); }
th .thw { display: inline-flex; align-items: center; gap: 5px; }
th .sar {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    opacity: 0;
    transition: transform .16s cubic-bezier(.4, 0, .2, 1);
}
th.srt:hover .sar { opacity: .45; }
th.asc, th.dsc { color: var(--brown-700); }
th.asc .sar, th.dsc .sar { opacity: 1; color: var(--green-700); }
th.asc .sar { transform: rotate(180deg); }

/* Poslední záhlaví nese lupu (a v E12 i ikonu sloupců) vpravo, mimo tok popisku. Odsazení
   zprava musí přebít i vzdušnou podobu (`.tabulka.je-vzdusna thead th` má `padding` celý) —
   jinak by popisek podjel pod lupu. */
th.tbql { position: relative; }
th.tbql,
.tabulka thead th.tbql,
.tabulka.je-vzdusna thead th.tbql { padding-right: 42px; }
/* Přilepené záhlaví (`tabulka.css`) zůstává přilepené — i `sticky` je pro lupu ukotvení. */
.tabulka thead th.tbql { position: sticky; }
th .kn-tbqb {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -13px;
    display: inline-flex;
    gap: 2px;
}

/* IKONOVÉ TLAČÍTKO TABULKY (návrh `.tbi`): lupa, šipky stránkovače. Zelené = zapnuté. */
.kn-tbi {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--brown-400);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 0;
}
.kn-tbi:hover { background: var(--cream-200); color: var(--brown-700); }
.kn-tbi:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.kn-tbi.on { background: var(--green-100); color: var(--green-700); }
.kn-tbi:disabled { opacity: .3; cursor: default; background: transparent; color: var(--brown-400); }
.kn-tbi svg { width: 15px; height: 15px; }

/* ŘÁDEK HLEDÁNÍ POD ZÁHLAVÍM (návrh `qrow`): krémový pruh, velká písmena záhlaví se tu
   nedědí. U tabulky s vlastním svislým posuvem je záhlaví přilepené (`tabulka.css`), takže
   se řádek hledání přilepí pod něj — jinak by ho při rolování první řádek záhlaví přejel. */
.kn-qrow th,
.tabulka thead tr.kn-qrow th {
    padding: 6px 6px;
    height: auto;
    background: var(--cream-50);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 13px;
    color: var(--brown-600);
    border-bottom: 1px solid var(--border-hairline);
}
.tabulka thead tr.kn-qrow th { top: 30px; }
.tabulka.je-vzdusna thead tr.kn-qrow th { top: 35px; }

/* Mřížka účtů v Administraci → Přístupy (`.pu-tab`) lepí záhlaví SCOPED pravidlem stránky, a to
   na buňky z knihovny (záhlaví s řazením, řádek hledání) nedosáhne: patří komponentám knihovny,
   ne stránce. Bez tohohle by při rolování odjela jen část záhlaví. Změřeno: záhlaví 32 px. */
.pu-tab thead th.srt,
.pu-tab thead th.tbql { position: sticky; top: 0; z-index: 2; }
.pu-tab thead tr.kn-qrow th { position: sticky; top: 32px; z-index: 2; }

/* Výběr hodnoty (návrh `.pick.qp`): pilulka s nativním `<select>` přes celou plochu. Bez
   volby čárkovaná a průhledná, se zvolenou hodnotou zelená jako každý filtr, který zužuje. */
.kn-qp {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px dashed var(--border-hairline);
}
.kn-qp:hover { background: var(--white); border-style: solid; }
.kn-qp .fv {
    font: var(--fw-medium) 13px var(--font-body);
    line-height: 28px;
    padding: 0 26px 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--brown-300);
    font-style: italic;
    font-weight: 400;
}
.kn-qp::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -5px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--brown-300);
    border-bottom: 1.5px solid var(--brown-300);
    transform: rotate(45deg);
    pointer-events: none;
}
.kn-qp select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.kn-qp:focus-within { box-shadow: var(--shadow-focus); }
.kn-qp.act { background: var(--green-100); border: 1px solid var(--green-300); }
.kn-qp.act .fv { color: var(--green-700); font-weight: 600; font-style: normal; }

/* Pole „Obsahuje" (návrh `.qpin`). */
.kn-qpin {
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    border: 1px dashed var(--border-hairline);
    border-radius: var(--radius-pill);
    background: transparent;
    padding: 0 12px;
    font: var(--fw-medium) 13px var(--font-body);
    color: var(--brown-700);
    outline: 0;
}
.kn-qpin::placeholder { color: var(--brown-300); font-style: italic; font-weight: 400; opacity: 1; }
.kn-qpin:hover { border-color: var(--brown-300); }
.kn-qpin:focus, .kn-qpin:not(:placeholder-shown) { background: var(--white); border-style: solid; }
.kn-qpin:focus { border-color: var(--green-500); }

/* „vlastní podmínka" — pole ji neumí ukázat, tak ji jen pojmenuje. */
.kn-q-vlastni { font-size: 13px; font-style: italic; color: var(--brown-400); padding-left: 6px; }

/* LIŠTA FILTRŮ BEZ SLOUPCE (návrh `.tfbar`). */
.kn-tfbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 17px;
    background: var(--cream-50);
    border-bottom: 1px solid var(--cream-200);
}
.kn-tfbar-mezera { flex: 1 1 auto; }

/* POČET, STRÁNKY A PRÁZDNÝ VÝSLEDEK pod tabulkou. Odkazy jsou `.kn-lnk` (návrh `.lnk`). */
.kn-pocet { font-size: 13.5px; color: var(--brown-400); white-space: nowrap; }
.kn-stranky { display: inline-flex; align-items: center; gap: 4px; }
.kn-stranky-stav { font-size: 13px; color: var(--brown-400); padding: 0 6px; white-space: nowrap; }
.kn-stranky-velikost {
    margin-left: 8px;
    height: 28px;
    border: 1px solid var(--border-hairline);
    border-radius: 7px;
    background: var(--white);
    font: inherit;
    font-size: 13px;
    color: var(--brown-600);
}
/* Prázdný výsledek je rámeček prázdného stavu z návrhu (`.kempty`) s odkazy v řádku. */
.kn-prazdny-vysledek {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 620px;
    box-sizing: border-box;
    padding: 26px 22px;
    border: 1px dashed var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--cream-50);
    font-size: 14px;
    line-height: 1.6;
    color: var(--brown-400);
}
.kn-lnk {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--green-700);
    cursor: pointer;
}
.kn-lnk:hover { text-decoration: underline; }
.kn-lnk:focus-visible { outline: 0; box-shadow: var(--shadow-focus); border-radius: 4px; }

/* ── FORMULÁŘ ─────────────────────────────────────────────────────────────────────────────
   Svislý rytmus formuláře, a nic jiného. Tři míry pojmenované jednou; kdo je potřebuje jinak,
   mění knihovnu (a mluví s Pavlem), ne stránku.

   ČÍSLA JSOU PŘEVZATÁ, NE VYMYŠLENÁ: přesně ta, která má dnes PRAVÝ sloupec dialogu a která
   jsou proti návrhu změřená jako správná. Levý sloupec je nikdy nedostal (měl `gap: 0`
   a jedinou náhradu mířenou na třídu, kterou používá jediný dialog), takže v něm dvě pole za
   sebou seděla na nule — v pěti dialozích. Změřeno v prohlížeči, ne odhadnuto.

   MARGIN, NE GAP. Gap dá jednu mezeru všemu a nadpis skupiny potřebuje jiné odstupy nahoru
   a dolů; s gapem by se k nim přičítal a nadpisy by se rozjely (přesně tak vznikl posuvník
   v dialogu tiketu, kvůli kterému se gap vypnul plošně). */
/* MÍRY JSOU NA `:root` SCHVÁLNĚ. Dokud nejsou všechny formuláře na prvku, potřebuje je číst
   i `dialog.css` u sloupců, které převedené ještě nejsou — a smysl téhle práce je, aby se
   čísla měnila na JEDNOM místě, ne aby vedle sebe stály dvě sady. */
/* ČÍSLA Z NÁVRHU 24. 9. 2026 (29. 9. 2026, jednotný dialog, ADR-0161 §11): pole má pod sebou
   11 px (`.fld { margin-bottom: 11px }`), nadpis skupiny 16 px nad a 9 px pod (`.sgh`). Změřeno
   na dialogu epiky, klienta a wizardu tiketu v návrhu, ne opsáno. Do 29. 9. tu byla čísla
   13 / 21 / 10 ze starší kopie (8. 9. je návrh ve všech dialozích zhustil). */
:root {
    --kn-formular-mezera: 11px;        /* prvek → prvek */
    --kn-formular-nad-skupinou: 16px;  /* prvek → nadpis skupiny */
    --kn-formular-pod-skupinou: 9px;   /* nadpis skupiny → prvek */
}

.mck .kn-formular {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* JEN HORNÍ OKRAJE. Svislé okraje se ve flexovém sloupci NESČÍTAJÍ do jednoho (nekolabují),
   takže „spodní 13 u pole + horní 21 u nadpisu" dá 34 — což se mi při první verzi tohohle
   prvku stalo a změřil jsem to (21 → 34 px nad „Rozsah průvodce"). Model proto nejdřív všechny
   okraje vynuluje — včetně těch, které si prvky nesou samy (`.dlg-sekce` má 21/10,5) — a pak
   nastaví JEDINÝ okraj: horní, podle toho, co po čem následuje. Odstup je tím vždy právě jedno
   číslo a nedá se sečíst. */
.mck .kn-formular > * { margin-top: 0; margin-bottom: 0; }

/* prvek → prvek */
.mck .kn-formular > * + * { margin-top: var(--kn-formular-mezera); }

/* nadpis skupiny → prvek (menší, nadpis k obsahu patří) */
.mck .kn-formular > .je-skupina + * { margin-top: var(--kn-formular-pod-skupinou); }

/* prvek → nadpis skupiny (větší, odděluje skupiny) */
.mck .kn-formular > * + .je-skupina { margin-top: var(--kn-formular-nad-skupinou); }

/* ── POZNÁMKY K VYDÁNÍM (Administrace → Vydání) ──────────────────────────────────────────
   Šířky sloupců a popis v rozbaleném řádku. Je to tu, a ne ve scoped CSS té komponenty,
   z téhož důvodu jako všechno ostatní v tomhle listu: buňky posílá volající a nesou jeho
   scope. (Šířky jsou vlastnost TÉHLE tabulky — podoba je výš a ta se nepřebíjí.) */
/* Sloupec šipky je úzký a beze jména — je to znak, ne údaj. */
.vyd-tabulka .sl-rozbal { width: 26px; padding-right: 0; }

.vyd-tabulka .sl-verze { width: 84px; font-family: var(--font-cisla); font-weight: 600; }
.vyd-tabulka .sl-datum { width: 104px; color: var(--brown-400); }
.vyd-tabulka .sl-druh { width: 116px; }
.vyd-tabulka .sl-tikety { width: 170px; }

/* Klíč tiketu v buňce — drobná pilulka, ať jde poznat od textu. */
.vyd-tiket {
    display: inline-block;
    font-family: var(--font-cisla);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brown-500);
    background: var(--cream-100);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    padding: 0 8px;
    margin-right: 4px;
    white-space: nowrap;
}

/* POPIS VYDÁNÍ JE V ROZBALENÉM ŘÁDKU (`tr.tabulka-rozsireni`), protože `.tabulka td` ořezává
   na jeden řádek — a to je u husté tabulky správně. Přebíjet ořez v buňce by znamenalo
   lokálně rozbít podobu, které se knihovnou právě předchází. */
.vyd-tabulka .vyd-telo {
    padding: 12px 14px 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--brown-600);
    max-width: 96ch;
}

.vyd-tabulka .vyd-telo :first-child { margin-top: 0; }
.vyd-tabulka .vyd-telo :last-child { margin-bottom: 0; }
.vyd-tabulka .vyd-telo p { margin: 0 0 8px; }
.vyd-tabulka .vyd-telo ul,
.vyd-tabulka .vyd-telo ol { margin: 0 0 8px; padding-left: 20px; }
.vyd-tabulka .vyd-telo li { margin: 2px 0; }
.vyd-tabulka .vyd-telo code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    background: var(--cream-100);
    border-radius: var(--radius-xs);
    padding: 1px 5px;
}

/* ZNAK ROZBALITELNOSTI. U řádku tabulky žádný v aplikaci nebyl — tam se ale rozbaluje NÁHLED
   toho, co je v řádku vidět, takže stačil `cursor: pointer` a zelený hover. Tady je pod řádkem
   text, o kterém řádek sám nic neříká. Je to týž ▶ jako u skládací sekce karty (ADR-0095),
   ne nový slovník. */
.vyd-tabulka .vyd-sipka {
    display: inline-block;
    width: 11px;
    font-size: 10px;
    line-height: 1;
    color: var(--brown-300);
    transition: transform var(--dur-fast) var(--ease-standard);
}

.vyd-tabulka .vyd-sipka.je-otevrena { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    .vyd-tabulka .vyd-sipka { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   PRVKY FORMULÁŘE A VOLBY (ADR-0131, ADR-0149, 24. 9. 2026 — návrh Onboarding v2)

   Pole, pilulky, karty, přepínač, posuvník, kalendář, výběr roku, bublina „Proč se ptáme",
   prstenec postupu, plocha pro soubory a plovoucí tlačítko. Čísla jsou z návrhu Pavla
   Müllera (`podklady/claude-design/onboarding-v2-2026-09-19`) a jsou ZMĚŘENÁ v prohlížeči
   (getComputedStyle), ne opsaná od oka.

   BEZ SCOPE TVÁŘE. Prvky nejsou pod `.mck` ani pod `.onb`: sdílí se chování a rozměry, barvy
   jdou z tokenů, které mají obě tváře stejné (ADR-0131 „dvě tváře, jedna sada prvků").
   Proto tu taky nejsou pravidla na holé značky (`button`, `a`) — na ně sahají listy tváří
   a specifičtější selektor by prvku podobu tiše přebil (hlídá `KnihovnaPrvkuTests`).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── POLE: MŘÍŽKA ──────────────────────────────────────────────────────────────────────────
   Dva sloupce, pole je buď přes celou šířku, nebo na půl.

   SLOUPCE ŘÍDÍ ŠÍŘKA MŘÍŽKY, NE OKNA (container query). Prostřední sloupec průvodce má na
   okně 901 px jen 218 px (rail a panel si vezmou zbytek), kdežto telefon 390 px má 358 px —
   podle okna by se tedy rozhodlo obráceně. Hranice 480 px dělí přesně tak, jak to kreslí
   návrh: prostřední sloupec (758 px) a dialog (540 px) mají dva sloupce, telefon jeden.

   „PŘES CELOU ŠÍŘKU" JE `1 / -1`, NIKDY `span 2`. `span 2` v jednosloupcové mřížce ZALOŽÍ
   druhý, implicitní sloupec — pole pak byla na telefonu široká 80 px a text v nich uříznutý
   (U2, změřeno 24. 9. 2026 na 390 px). `1 / -1` se roztáhne jen přes sloupce, které jsou. */
.kn-pole-obal { container-type: inline-size; min-width: 0; }

.kn-pole-mrizka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
}
.kn-pole-mrizka.je-kompaktni { gap: 13px; }

.kn-pole {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: 1 / -1;
    min-width: 0;
}
.kn-pole.je-pulka { grid-column: auto; }
.je-kompaktni > .kn-pole { gap: 6px; }

@container (max-width: 480px) {
    .kn-pole-mrizka { grid-template-columns: minmax(0, 1fr); }
    .kn-pole.je-pulka { grid-column: 1 / -1; }
}

/* Popisek a hvězdička povinného pole. Hvězdička je jantarová z návrhu (`.req`), ne červená:
   povinné není chyba. */
.kn-pole-popisek {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--brown-600);
    margin: 0;
}
.je-kompaktni .kn-pole-popisek { font-size: 12px; }
.kn-povinne { color: #a8741a; font-weight: 700; margin-left: 3px; }

.kn-pole-napoveda { font-size: 12px; line-height: 1.5; color: var(--brown-400); }

/* Věta u pole (odepření, výtka) — u prvku, kterého se týká, ne oknem (ADR-0067). */
.kn-pole-chyba {
    font-size: 12.5px;
    line-height: 1.5;
    color: #a8741a;
    background: #f8edd8;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
}

/* ── POLE: VSTUP ───────────────────────────────────────────────────────────────────────────
   Jedna podoba pro text, odstavec, výběr i obal čísla a data (`CisloPole`/`DatumPole` dostanou
   tuhle třídu parametrem `Trida`).

   PRÁZDNÉ POLE JE VIDĚT (návrh: „Nápověda musí být jasně odlišená od skutečně vyplněné
   hodnoty"): krémová plocha, čárkovaný rámeček a nápověda kurzívou. Bez toho vypadá
   předvyplněný formulář a prázdný formulář stejně — a klient neví, co ještě chybí. */
.kn-vstup {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--brown-700);
    background: var(--white);
    height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-hairline);
    outline: 0;
    width: 100%;
    margin: 0;
    line-height: normal;
    box-sizing: border-box;
}
.kn-vstup:focus { border-color: var(--green-500); box-shadow: var(--shadow-focus); }
.kn-vstup::placeholder { color: var(--brown-300); font-style: italic; opacity: 1; }
.kn-vstup:placeholder-shown { background: var(--cream-50); border-style: dashed; }
.kn-vstup:placeholder-shown:focus { background: var(--white); border-style: solid; }

textarea.kn-vstup {
    height: auto;
    min-height: 88px;
    padding: 12px 14px;
    line-height: 1.6;
    resize: vertical;
}

/* Výběr dostane týž kabát — jinak je to jediný prvek obrazovky, který si kreslí operační
   systém po svém. Šipka je z návrhu (`select.sel`): 16 px, tah brown-300, 11 px od kraje. */
select.kn-vstup {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a291' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 16px;
    padding-right: 34px;
    cursor: pointer;
}

/* VÝBĚR V DIALOGU má v návrhu v2 vlastní podobu (`select.in.cbx`, 24. 9. 2026): menší
   zaoblení (radius-sm), 12 px od kraje a plnou šipku 10 × 6 px v brown-600, 13 px od kraje.
   Ve formuláři kapitoly zůstává `select.sel` výš. Změřeno v návrhu nad dialogem majetku. */
dialog .kn-pole-mrizka select.kn-vstup {
    border-radius: var(--radius-sm);
    padding-left: 12px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23594334' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.2 5 4.8 9 1.2'/%3E%3C/svg%3E");
    background-position: right 13px center;
    background-size: 10px 6px;
    line-height: 36px;
}
dialog .kn-pole-mrizka select.kn-vstup:focus { border-color: var(--green-300); box-shadow: 0 0 0 3px rgba(175, 202, 11, .18); }

.je-kompaktni .kn-vstup { height: 38px; font-size: 14px; }
.je-kompaktni textarea.kn-vstup { height: auto; min-height: 62px; padding: 10px 12px; }

/* Obal čísla a data (`.zpole` z cimpel.css) je řádkový flex — v poli průvodce roste přes
   celou šířku jako ostatní vstupy. */
.kn-pole .zpole { display: flex; width: 100%; max-width: none; }

/* ── POLE „CO KONKRÉTNĚ?" ─────────────────────────────────────────────────────────────────
   Doplnění k volbě „jiné" — ukáže se, až když je „jiné" zvolené (návrh `hasOther`). */
.kn-upresneni { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.kn-upresneni-popisek { flex: 0 0 auto; font-size: 12px; line-height: 1.5; color: var(--brown-400); }
.kn-upresneni .kn-vstup { height: 38px; font-size: 14px; max-width: 340px; }

/* ── PILULKY VOLBY ─────────────────────────────────────────────────────────────────────────
   Jedna i víc voleb. Zvolená pilulka: zelená plocha, zelený rámeček, tučnější písmo. */
.kn-pilulky { display: flex; flex-wrap: wrap; gap: 8px; }
.kn-pilulky.je-kompaktni,
.je-kompaktni .kn-pilulky { gap: 6px; }

.kn-pilulka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    margin: 0;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-hairline);
    background: var(--white);
    font: 500 13.5px var(--font-body);
    line-height: normal;
    color: var(--brown-600);
    cursor: pointer;
    text-align: left;
}
.kn-pilulka:hover { border-color: var(--green-300); }
.kn-pilulka:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.kn-pilulka.je-zvolena {
    background: var(--green-100);
    border-color: var(--green-300);
    color: var(--green-700);
    font-weight: 600;
}
/* Hustota se DĚDÍ z mřížky: pilulky v kompaktní `MrizkaPoli` jsou kompaktní samy. */
.je-kompaktni .kn-pilulka { min-height: 34px; padding: 0 13px; font-size: 12.5px; }

/* ── KARTY VOLBY ───────────────────────────────────────────────────────────────────────────
   Volba s podtitulkem. Kolečko = jedna volba, čtvereček = víc voleb (návrh `.rdo` × `.ck`). */
.kn-karty { display: grid; gap: 9px; }
.kn-karty.je-kompaktni,
.je-kompaktni .kn-karty { gap: 7px; }
.kn-karty.je-vedle-sebe { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.kn-karta {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 15px 16px;
    text-align: left;
    font-family: var(--font-body);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--white);
    cursor: pointer;
}
.je-kompaktni .kn-karta { padding: 11px 13px; }
.kn-karta:hover { border-color: var(--green-300); background: var(--cream-50); }
.kn-karta:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.kn-karta.je-zvolena { border-color: var(--green-500); background: var(--green-100); }

.kn-karta-znacka {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    border: 1.5px solid var(--brown-300);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-sizing: border-box;
}
.kn-karta-znacka.je-kolecko { border-radius: 50%; }
.kn-karta-znacka.je-ctverec { border-radius: 5px; }
.kn-karta-znacka svg { width: 11px; height: 11px; opacity: 0; }
.kn-karta.je-zvolena .kn-karta-znacka { background: var(--green-700); border-color: var(--green-700); }
.kn-karta.je-zvolena .kn-karta-znacka.je-kolecko { box-shadow: inset 0 0 0 3px var(--white); }
.kn-karta.je-zvolena .kn-karta-znacka.je-ctverec svg { opacity: 1; }

.kn-karta-nazev { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--brown-700); }
.kn-karta-podtitulek {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--brown-400);
    text-wrap: pretty;
}

/* ── PŘEPÍNAČ ANO / NE ─────────────────────────────────────────────────────────────────────
   Nativní zaškrtávací pole schované pod vlastní kolejničkou — funguje i bez okruhu (formulář
   ho odešle) a slovo „ano"/„ne" přepíná CSS, ne skript. */
.kn-prepinac {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    cursor: pointer;
    margin: 0;
}
.kn-prepinac-vstup {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.kn-prepinac-kolej {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--cream-200);
    border: 1px solid var(--border-hairline);
    box-sizing: border-box;
    transition: background var(--dur-fast) var(--ease-standard);
}
.kn-prepinac-kolej::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(46, 35, 26, .28);
    transition: transform var(--dur-fast) var(--ease-standard);
}
.kn-prepinac-vstup:checked + .kn-prepinac-kolej { background: var(--green-500); border-color: #9bb40a; }
.kn-prepinac-vstup:checked + .kn-prepinac-kolej::after { transform: translateX(16px); }
.kn-prepinac-vstup:focus-visible + .kn-prepinac-kolej { box-shadow: var(--shadow-focus); }
/* Řádkování slova je `normal` jako v návrhu (`.swt b` uvnitř tlačítka), ne 1,55 z formuláře —
   slovo stojí uprostřed 38px řádku a vyšší řádek by ho neposunul, jen by měřil jinak. */
.kn-prepinac-text { font-size: 13px; font-weight: 500; color: var(--brown-500); line-height: normal; }
.kn-prepinac-vstup:checked ~ .kn-prepinac-text { color: var(--brown-700); }
.kn-prepinac-vstup:checked ~ .kn-prepinac-text.je-ne,
.kn-prepinac-vstup:not(:checked) ~ .kn-prepinac-text.je-ano { display: none; }

@media (prefers-reduced-motion: reduce) {
    .kn-prepinac-kolej, .kn-prepinac-kolej::after { transition: none; }
}

/* ── POSUVNÍK ČÁSTKY ───────────────────────────────────────────────────────────────────────
   Velké číslo nahoře, posuvník pod ním, krajní hodnoty pod posuvníkem.

   NATIVNÍ POSUVNÍK V BARVĚ ZNAČKY (`accent-color`), NE VE VÝCHOZÍ ŠEDI. Návrh ho kreslí
   právě takhle; vlastní kolejnice z `::-webkit-slider-*` by se v každém prohlížeči chovala
   jinak a klávesnice i čtečka by přišly o to, co nativní prvek umí zadarmo. */
.kn-posuvnik-hodnota { display: flex; align-items: baseline; gap: 12px; }
.kn-posuvnik-cislo {
    font-family: var(--font-cisla);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -.01em;
    color: var(--brown-700);
    white-space: nowrap;
}
.kn-posuvnik-jednotka { font-size: 13px; color: var(--brown-400); }
.kn-posuvnik {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 16px;
    margin: 12px 2px 2px;
    accent-color: var(--green-500);
    cursor: pointer;
}
.kn-posuvnik:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.kn-posuvnik-meze {
    display: flex;
    justify-content: space-between;
    max-width: 420px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--brown-300);
}

/* ── INFORMAČNÍ BUBLINA („Proč se ptáme") ──────────────────────────────────────────────────
   Tlačítko s ikonou (i), klik otevře PLOVOUCÍ bublinu. Není to `<dialog>` (ten jde do horní
   vrstvy a nad ním by nic nepromluvilo, ADR-0092) ani rozbalení v řádku — to zúžilo nadpis
   kapitoly a na telefonu přeteklo přes H1 (U3).

   BUBLINA SE MĚŘÍ K ŘÁDKU VOLAJÍCÍHO, ne k tlačítku: řádek nese `kn-bublina-radek`
   (`InformacniBublina.Radek`), bublina se opře o jeho pravý kraj a je nejvýš tak široká jako
   on — tak ji kreslí návrh a tak se na telefonu nedostane mimo obraz. */
.kn-bublina-radek { position: relative; }
.kn-bublina { flex: 0 0 auto; margin-top: 3px; }
.kn-bublina > summary { list-style: none; }
.kn-bublina > summary::-webkit-details-marker { display: none; }

.kn-bublina-tlacitko {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-hairline);
    background: var(--cream-50);
    font: 600 12px var(--font-body);
    line-height: normal;
    color: var(--brown-500);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.kn-bublina-tlacitko:hover { background: var(--white); color: var(--brown-700); border-color: var(--brown-200); }
.kn-bublina-tlacitko:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.kn-bublina[open] > .kn-bublina-tlacitko {
    background: var(--white);
    color: var(--brown-700);
    border-color: var(--brown-200);
    box-shadow: var(--shadow-xs);
}
.kn-bublina-tlacitko svg { width: 14px; height: 14px; color: var(--brown-300); flex: 0 0 auto; }

.kn-bublina-okno {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 20;
    width: min(322px, 100%);
    box-sizing: border-box;
    padding: 14px 16px 15px;
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 34px rgba(46, 35, 26, .15);
    text-align: left;
    animation: kn-objevit .16s var(--ease-standard);
}
.kn-bublina-nadpis {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.55;
    color: var(--brown-400);
}
.kn-bublina-okno p {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.62;
    color: var(--brown-600);
    text-wrap: pretty;
}
/* Na telefonu stojí tlačítko pod nadpisem VLEVO, takže bublina jde od levého kraje. */
@media (max-width: 640px) {
    .kn-bublina-okno { right: auto; left: 0; }
}

@keyframes kn-objevit { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .kn-bublina-okno, .kn-kalendar-okno { animation: none; }
}

/* ── PRSTENEC POSTUPU ──────────────────────────────────────────────────────────────────────
   Kolik je hotovo, jako kroužek (návrh `ringw`). Geometrie je v komponentě (r = 18 ve čtverci
   44), tady barvy a písmo. */
.kn-prstenec {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
}
.kn-prstenec.je-maly { width: 30px; height: 30px; }
.kn-prstenec svg { display: block; width: 100%; height: 100%; }
.kn-prstenec-kolej { fill: none; stroke: var(--border-hairline); }
.kn-prstenec-postup { fill: none; stroke: var(--green-500); stroke-linecap: round; }
.kn-prstenec.je-na-tmavem .kn-prstenec-kolej { stroke: rgba(244, 239, 228, .25); }
.kn-prstenec-cislo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 11px var(--font-cisla);
    line-height: normal;
    color: var(--brown-700);
}
.kn-prstenec.je-na-tmavem .kn-prstenec-cislo { color: var(--cream-100); }

/* ── PLOCHA PRO SOUBORY ────────────────────────────────────────────────────────────────────
   Přetáhnout sem, nebo kliknout na „Vybrat soubory".

   SOUBOROVÝ VSTUP LEŽÍ PŘES CELOU PLOCHU a je průhledný. Přetažení tím funguje bez jediného
   řádku skriptu (prohlížeč pustí soubor na vstup a ten ohlásí změnu), klik kamkoli otevře
   výběr a vlastní český popisek zůstane vidět — prohlížečové „Choose File" ne
   (hlídá `NativniPrvkyProhlizeceTests`). Zvýraznění při tažení přidává `knihovna.js`. */
.kn-soubory {
    position: relative;
    display: block;
    padding: 26px 20px;
    border: 1px dashed var(--brown-300);
    border-radius: var(--radius-md);
    background: var(--cream-50);
    text-align: center;
    transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.kn-soubory.je-nad,
.kn-soubory:hover { border-color: var(--green-500); background: var(--white); }
.kn-soubory:focus-within { box-shadow: var(--shadow-focus); }
.kn-soubory.je-zaneprazdnena { opacity: .6; }
.kn-soubory-vstup {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}
.kn-soubory-nadpis { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--brown-700); }
.kn-soubory-popis { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--brown-400); }
.kn-soubory-tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 16px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-hairline);
    background: var(--white);
    font: 600 13px var(--font-body);
    line-height: normal;
    color: var(--brown-600);
    white-space: nowrap;
}
.kn-soubory:hover .kn-soubory-tlacitko { border-color: var(--green-300); color: var(--green-700); }
/* Stav nahrávání PRO ČTEČKU (`role="status"`): ve stránce je pořád, oku schovaný. Ne
   `display: none` ani `visibility: hidden` — ty ho vezmou i čtečce. */
.kn-soubory-stav {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── PLOVOUCÍ TLAČÍTKO ─────────────────────────────────────────────────────────────────────
   Tmavá kapsle dole uprostřed (návrh `mfab`). Je to ODKAZ — funguje i ve statické tváři. */
.kn-plovouci {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 18px 10px 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--brown-700);
    box-shadow: 0 8px 24px rgba(46, 35, 26, .28);
    font: 600 13px var(--font-body);
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
/* BARVA ZVLÁŠŤ A SE ZNAČKOU V SELEKTORU: listy tváří barví holé `a` (`.onb a`, `.onb a:hover`)
   a načítají se ZA knihovnou, takže by tmavé tlačítko dostalo zelené písmo. */
a.kn-plovouci[href],
a.kn-plovouci[href]:hover,
a.kn-plovouci[href]:focus-visible { color: var(--cream-100); }
a.kn-plovouci[href]:hover,
a.kn-plovouci[href]:focus-visible { background: var(--brown-900); }
/* Na širokém okně plovoucí tlačítko nahrazuje sloupec vedle — tam je navíc. */
@media (min-width: 901px) {
    .kn-plovouci.je-jen-na-telefonu { display: none; }
}

/* ── KALENDÁŘ BEZ PSANÍ (ADR-0161 §1–§6, rozhodnutí 21) ────────────────────────────────────
   Pole s datem, rokem nebo měsícem je TLAČÍTKO (`.kn-dpi`, návrhové `.dpi`): vypadá jako vstup
   s ikonou, prázdné čárkovaně a kurzívou. Okno je `position: fixed` (návrh `.dpop`, 252 px),
   umisťuje ho `alfredKalendar.otevri` podle spouštěče — v husté buňce se neořeže a v <dialog>
   zůstává v horní vrstvě, protože se kreslí uvnitř něj. */
.kn-kalendar { position: relative; display: block; min-width: 0; }
.kn-dpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 38px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--white);
    font: 500 14px var(--font-body);
    line-height: 1.3;
    color: var(--brown-700);
    text-align: left;
    /* V dialogu stojí pole uvnitř popisku `.dlg-popisek` (kapitálky s prostrkáním) — podoba
       se nedědí, jinak by „Vyberte datum" i hodnota vyšly prostrkané kapitálkami. */
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.kn-dpi:hover:not(:disabled) { border-color: var(--brown-300); }
.kn-dpi:focus-visible { outline: 0; border-color: var(--green-500); box-shadow: var(--shadow-focus); }
.kn-dpi:disabled { cursor: default; opacity: .6; }
.kn-dpi.je-prazdne { background: var(--cream-50); border-style: dashed; color: var(--brown-300); font-style: italic; font-weight: 400; }
.kn-dpi-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-dpi-ikona { width: 15px; height: 15px; flex: 0 0 auto; color: var(--brown-300); }

/* V mřížce polí průvodce má pole výšku vstupů vedle sebe (44 px, kompaktně 38 px). */
.kn-pole-mrizka .kn-dpi { height: 44px; padding: 0 14px; font-size: 15px; }
.kn-pole-mrizka.je-kompaktni .kn-dpi, .je-kompaktni .kn-dpi { height: 38px; padding: 0 12px; font-size: 14px; }

/* HUSTÝ spouštěč — buňky tabulek a husté panely, kde jsou vstupy 28 px. */
.kn-dpi.je-husty { height: 28px; padding: 0 8px; gap: 6px; font-size: 12.5px; border-radius: var(--radius-sm); }
.kn-dpi.je-husty .kn-dpi-ikona { width: 13px; height: 13px; }

/* ÚPRAVA V MÍSTĚ (`PodobaKalendare.Hodnota`) je tlačítko hodnoty s ikonou kalendáře místo
   tužky — jeho podoba bydlí u skořápky v `upravitelna-hodnota.css` (jedna kopie, ne dvě). */

.kn-kalendar-clona {
    position: fixed;
    inset: 0;
    z-index: 70;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}
.kn-kalendar-okno {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 71;
    width: 252px;
    box-sizing: border-box;
    padding: 10px;
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 34px rgba(46, 35, 26, .16);
    font-style: normal;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    animation: kn-objevit .12s var(--ease-standard);
}
.kn-kalendar-hlava { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.kn-kalendar-titulek { font-size: 13px; font-weight: 700; color: var(--brown-700); }
.kn-kalendar-sipka {
    display: flex;
    padding: 5px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--brown-400);
    cursor: pointer;
}
.kn-kalendar-sipka:hover { background: var(--cream-100); color: var(--brown-700); }
.kn-kalendar-sipka:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.kn-kalendar-sipka svg { width: 14px; height: 14px; }
.kn-kalendar-mrizka { display: grid; gap: 4px; }
.kn-kalendar-mrizka.je-roky { grid-template-columns: repeat(4, 1fr); }
.kn-kalendar-mrizka.je-mesice { grid-template-columns: repeat(3, 1fr); }
.kn-kalendar-mrizka.je-dny { grid-template-columns: repeat(7, 1fr); }
/* Řádky (`role="row"`) jsou pro čtečku — mřížku kreslí CSS přes buňky, ne přes řádky. */
.kn-kalendar-radek { display: contents; }
.kn-kalendar-den-tydne {
    padding: 2px 0 4px;
    text-align: center;
    font: 700 9.5px var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brown-300);
}
.kn-kalendar-bunka {
    padding: 7px 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font: 500 12.5px var(--font-body);
    line-height: normal;
    color: var(--brown-600);
    cursor: pointer;
}
.kn-kalendar-bunka:hover { background: var(--cream-100); color: var(--brown-700); }
.kn-kalendar-bunka:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.kn-kalendar-bunka.je-zvolena { background: var(--green-500); color: var(--brown-900); font-weight: 700; }
.kn-kalendar-bunka.je-prazdna { visibility: hidden; }
.kn-kalendar-pata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--cream-200);
}
.kn-kalendar-odkaz {
    padding: 0;
    border: 0;
    background: transparent;
    font: 600 12.5px var(--font-body);
    color: var(--green-700);
    white-space: nowrap;
    cursor: pointer;
}
.kn-kalendar-odkaz:hover { color: var(--brown-700); }
.kn-kalendar-odkaz:focus-visible { outline: 0; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.kn-kalendar-odkaz.je-tlumeny { color: var(--brown-400); }
/* Bez „Smazat" (povinné datum, `JdeSmazat`) zůstává „Zvolit měsíc/rok" vpravo, kde ho návrh má. */
.kn-kalendar-odkaz.je-zpet { margin-left: auto; }

/* ── ZKUŠEBNA (jen /zkusebna/knihovna) ───────────────────────────────────────────────────
   Podoba samotné zkušebny, ne prvků — patří k ní, protože stránka žádnou vlastní nemá. */
.zkn-sekce { margin: 0 0 34px; }
.zkn-nadpis { font-size: 15px; font-weight: 700; color: var(--brown-700); margin: 0 0 4px; }
.zkn-popis { font-size: 13.5px; color: var(--brown-400); line-height: 1.55; margin: 0 0 12px; max-width: 78ch; }
/* Obal, ve kterém se zkouší tabulka BEZ vlastního rámu. */
.zkn-karta {
    background: var(--white); border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px;
}

/* Mřížka ukázek ve zkušebně — prvky vedle sebe, ať jde porovnat obě podoby naráz. */
.zkn-vedle { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.zkn-stitek { display: block; margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brown-400); }
.zkn-hlava { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.zkn-hlava > div:first-child { flex: 1 1 260px; min-width: min(260px, 100%); }
.zkn-vystup { margin-top: 10px; font-size: 12.5px; color: var(--brown-500); }

/* ── NABÍDKA (ADR-0158 §A9, návrh `.kmenu` a `.kmenu.ctx`) ─────────────────────────────────
   Kreslí se v HORNÍ VRSTVĚ (`popover`), takže ji neuřízne `overflow` obalu tabulky. Poloha je
   `fixed` u kurzoru (kontextová) nebo pod tlačítkem (rozbalovací) — souřadnice dá
   `js/nabidka.js`, který ji i odsune od okraje okna. Do Alfrédovy zóny trvale nevstupuje:
   otevírá se na akci a Esc i klik mimo ji zavřou (whitelist `AlfredovaZonaTests`).

   `display` JEN PRO OTEVŘENOU: zavřenou nabídku schovává pravidlo prohlížeče
   `[popover]:not(:popover-open) { display: none }`, a autorské `display` by ho přebilo. */
.kn-nabidka {
    position: fixed;
    inset: auto;
    margin: 0;
    z-index: 80;
    min-width: 250px;
    max-width: 340px;
    box-sizing: border-box;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--brown-700);
    outline: 0;
}
.kn-nabidka:popover-open { display: flex; flex-direction: column; }
.kn-nabidka.je-rozbalovaci { min-width: 270px; }
.kn-nabidka-hlava {
    padding: 7px 10px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--cream-200);
    font-size: 13px;
    /* Řádkování z návrhu (`.ctxh` dědí 1,55 z těla mockupu); zděděných 1,45 z `.mck` by hlavu
       snížilo o 1,3 px (E19, porovnání s návrhem). */
    line-height: 1.55;
    color: var(--brown-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kn-nabidka-hlava b { color: var(--brown-700); font-weight: 600; }
.kn-nabidka-polozka {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 9px 10px;
    border-radius: 8px;
    font: 500 14px var(--font-body);
    color: var(--brown-700);
    text-align: left;
    cursor: pointer;
}
.kn-nabidka-polozka:hover,
.kn-nabidka-polozka:focus-visible { background: var(--cream-50); outline: 0; }
.kn-nabidka-polozka:focus-visible { box-shadow: inset 0 0 0 2px var(--green-300); }
.kn-nabidka-polozka svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--brown-400);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kn-nabidka-polozka.je-nebezpecna { color: #c0472e; }
.kn-nabidka-polozka.je-nebezpecna svg { stroke: #c0472e; }
.kn-nabidka-polozka:disabled { opacity: .42; cursor: default; }
.kn-nabidka-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-nabidka-poznamka { font-size: 12.5px; color: var(--brown-300); white-space: nowrap; }
/* „BRZY" (E19, vzor OB-15): akce, kterou ještě nestavíme, stojí na svém místě se štítkem; čísla jako
   `.kk-brzy` na kartě. Položka je vypnutá, průhlednost .42 dává `:disabled` výš. */
.kn-nabidka-brzy {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brown-400);
    white-space: nowrap;
}
/* ROZBALOVACÍ položka bez poznámky a bez „brzy" má dva sloupce jako návrh (`.kmenu button`:
   `20px 1fr`). Prázdný třetí sloupec by přidal mezeru 11 px a nabídka Hromadné akce by vyšla
   o 8 px širší než 270 px z návrhu. Kontextová podoba má tři sloupce vždy (`.kmenu.ctx`). */
.kn-nabidka.je-rozbalovaci .kn-nabidka-polozka:not(:has(.kn-nabidka-poznamka, .kn-nabidka-brzy)) {
    grid-template-columns: 20px minmax(0, 1fr);
}
.kn-nabidka-oddelovac { height: 1px; background: var(--cream-200); margin: 5px 2px; }

/* ── DROBEČKY PODMÍNEK (ADR-0158 §A11, návrh `.frow` a `.fac`) ─────────────────────────────
   „Vše" › drobek › drobek, chip „Seskupeno: X", vpravo „Upravit podmínky". Co klik na drobek
   (nebo ×, nebo „Vše") odebere, vybledne a přeškrtne se UŽ PŘI NAJETÍ — čistě v CSS (`:has`),
   bez cesty na server. */
.kn-frow {
    display: flex;
    align-items: center;
    gap: 9.5px;
    flex-wrap: wrap;
    min-height: 28px;
    margin-bottom: 16px;
}
.kn-frow .kn-vse { padding: 0; }
.kn-frow-sipka { width: 14px; height: 14px; color: var(--brown-300); flex: 0 0 auto; }
.kn-frow-mezera { flex: 1 1 auto; }
.kn-frow-varovani { font-size: 13px; color: #a8741a; }
.kn-fdiv { width: 1px; height: 26px; background: var(--border-hairline); flex: 0 0 auto; }
.kn-fac {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    max-width: 100%;
    padding: 0 6px 0 13px;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    background: var(--cream-200);
    border: 1px solid var(--border-hairline);
    font-size: 13px;
    font-weight: 600;
    color: var(--brown-600);
    white-space: nowrap;
}
.kn-fac .fct {
    display: block;
    flex: 0 1 auto;
    max-width: 460px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.kn-fac .fct:hover { color: var(--green-700); }
.kn-fac .fct:focus-visible { outline: 0; box-shadow: var(--shadow-focus); border-radius: 4px; }
.kn-fac.last .fct,
.kn-fac.je-chip .fct { cursor: default; }
.kn-fac.last .fct:hover,
.kn-fac.je-chip .fct:hover { color: inherit; }
.kn-fac .fx {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: rgba(46, 35, 26, .09);
    color: var(--brown-500);
    font: 700 13px var(--font-body);
    line-height: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.kn-fac .fx:hover { background: rgba(46, 35, 26, .2); color: var(--brown-700); }
.kn-fac .fx:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.kn-fac.je-preskocena { border-style: dashed; border-color: #d9b56a; background: #fbf3e2; }
/* Náhled odebrání: drobky ZA tím, na který se klikne, × u drobku jen ten, „Vše" všechny. */
.kn-fac:not(.last):has(> .fct:hover) ~ .kn-fac:not(.je-chip),
.kn-fac:has(> .fx:hover):not(.je-chip),
.kn-frow:has(> .kn-vse:hover) .kn-fac:not(.je-chip) { opacity: .45; text-decoration: line-through; }

/* ── EDITOR PODMÍNEK (ADR-0158 §A10, návrh `kl.fb`) ─────────────────────────────────────────
   Vložený panel nad tabulkou (bílá karta `.c`, ne dialog). Výběry jsou návrhové `.mpick`
   (viditelný štítek a průhledný nativní výběr přes celou plochu — klávesnice i čtečka zůstávají
   prohlížeči), spojka je segment `.seg.sm`, pole hodnoty `.fld input`. */
.kn-editor {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 17px 13px;
    margin-bottom: 16px;
}
.kn-editor-radky { display: flex; flex-direction: column; gap: 8px; }
.kn-editor-radek { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kn-editor-spojka { flex: 0 0 104px; }
.kn-editor-pole { flex: 1 1 180px; max-width: 230px; min-width: 0; }
.kn-editor-op { flex: 1 1 130px; max-width: 170px; min-width: 0; }
.kn-editor-vyber { min-width: 0; }
.kn-editor-hodnota { display: flex; gap: 8px; align-items: center; min-width: 0; flex: 2 1 200px; }
.kn-editor-hodnota > * { flex: 1 1 auto; min-width: 0; }
.kn-editor-hodnota > .kn-editor-a { flex: 0 0 auto; }
.kn-editor-a { font-size: 14px; color: var(--brown-400); }
.kn-editor-napoveda { margin: 0 0 0 112px; font-size: 12.5px; color: var(--brown-400); }
/* Obal hodnoty (klíč místa pro fokus po otázce). Mřížka: pole v něm vyplní celou šířku sloupce. */
.kn-editor-misto { display: grid; min-width: 0; }
/* Otázka pole (doptání „1,234", výtka): věta u řádku a viditelná cesta ven. Není to chyba, proto
   bez červené — jako doptání samo (`.zpole.je-dotaz`). */
.kn-editor-otazka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0 0 0 112px;
    font-size: 12.5px;
    color: var(--brown-600);
}
.kn-editor-otazka .kn-lnk { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.kn-editor-otazka .kn-lnk svg { width: 13px; height: 13px; }
/* Řádek s otázkou: doptání přidá pod pole hodnoty řádek, takže výběry se srovnají k HORNÍ hraně
   (k poli, ne doprostřed mezi pole a otázku); spojka a × se dorovnají na střed první řádky. */
.kn-editor-radek.je-otazka,
.kn-editor-radek.je-otazka .kn-editor-hodnota { align-items: flex-start; }
.kn-editor-radek.je-otazka .kn-editor-a { line-height: 38px; }
.kn-editor-radek.je-otazka > .kn-editor-spojka { margin-top: 3px; }
.kn-editor-radek.je-otazka > .kn-tbi { margin-top: 6px; }
.kn-editor-vstup,
.kn-editor-hodnota .zpole input {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-hairline);
    background: var(--white);
    font: 500 14px var(--font-body);
    color: var(--brown-700);
    padding: 9.5px 14px;
    outline: 0;
}
.kn-editor-vstup::placeholder { color: var(--brown-300); font-style: italic; opacity: 1; }
.kn-editor-vstup:placeholder-shown { background: var(--cream-50); border-style: dashed; }
.kn-editor-vstup:focus { border-color: var(--green-500); background: var(--white); border-style: solid; }
.kn-editor-hodnota .zpole { display: flex; width: 100%; max-width: none; }
.kn-editor-pata {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cream-200);
}
.kn-editor-pata > .kn-lnk:first-child { padding: 0; }
.kn-editor-mezera { flex: 1 1 auto; }

/* Výběr návrhu `.mpick`: štítek 37 px, šipka koutkem, nativní výběr průhledný přes celou plochu.
   Od 14. 10. 2026 prvek `Knihovna/VyberPole` (editor podmínek i výběr v místě na kartě). */
.kn-pick { position: relative; display: block; min-width: 0; }
.kn-pick .mv {
    display: flex;
    align-items: center;
    height: 37px;
    box-sizing: border-box;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--white);
    padding: 0 32px 0 14px;
    font: 600 14px var(--font-body);
    color: var(--brown-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kn-pick:hover .mv { border-color: var(--brown-300); }
.kn-pick:focus-within .mv { box-shadow: var(--shadow-focus); }
.kn-pick::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 15px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--brown-300);
    border-bottom: 1.5px solid var(--brown-300);
    transform: rotate(45deg);
    pointer-events: none;
}
.kn-pick select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
/* Vypnutý operátor (pole ještě není vybrané) návrh NEŠEDÍ - vypadá jako každý jiný výběr. */
.kn-pick.je-vypnuty select { cursor: default; }
/* SEZNAM VOLEB JAKO KNIHOVNÍ NABÍDKA (14. 10. 2026, pokyn uživatele: šedý systémový seznam
   „je tak i v návrhu, ale je to špatně"). Prohlížeč, který umí `appearance: base-select`
   (Chrome a Edge od 135), dostane bílý panel s položkami jako `.kn-nabidka`; ostatní zůstanou
   u systémového seznamu, výběr funguje stejně. Vybranou hodnotu dál ukazuje štítek `.mv`,
   vlastní text výběru je průhledný. */
@supports (appearance: base-select) {
    .kn-pick select,
    .kn-pick select::picker(select) { appearance: base-select; }
    .kn-pick select { opacity: 1; color: transparent; background: transparent; }
    .kn-pick select::picker-icon { display: none; }
    .kn-pick select::picker(select) {
        margin-top: 4px;
        min-width: anchor-size(width);
        max-height: 320px;
        box-sizing: border-box;
        padding: 6px;
        background: var(--white);
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }
    .kn-pick select option {
        padding: 9px 10px;
        border-radius: 8px;
        font: 500 14px var(--font-body);
        color: var(--brown-700);
        cursor: pointer;
    }
    .kn-pick select option::checkmark { display: none; }
    .kn-pick select option:hover,
    .kn-pick select option:focus-visible { background: var(--cream-50); outline: 0; }
    .kn-pick select option:checked { background: var(--green-50); color: var(--green-700); font-weight: 600; }
    .kn-pick select optgroup { font: 600 11px var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--brown-400); padding: 8px 10px 2px; }
}
/* Uloženo (návrh `.mpick.ivok`): zelený rámeček a světlé pozadí, jako fajfka u textu. */
.kn-pick.je-ulozeno .mv { border-color: var(--green-500); background: #f6f9e6; }

/* Spojka a / nebo (návrh `.seg.sm`). */
.kn-seg {
    display: inline-flex;
    background: var(--surface-sunken);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    padding: 2.5px;
}
.kn-seg button {
    border: 0;
    background: transparent;
    font: 600 13px var(--font-body);
    color: var(--brown-400);
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
}
.kn-seg button.on { background: var(--white); color: var(--brown-700); box-shadow: var(--shadow-xs); }
.kn-seg button:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }

/* Klávesová nápověda (návrh `.kbd`) a hlavní tlačítko (návrh `.ico-btn.pri`). */
.kn-kbd {
    font-family: var(--font-cisla);
    font-size: 12px;
    font-weight: 600;
    color: var(--brown-300);
    border: 1px solid var(--border-hairline);
    border-radius: 4.5px;
    padding: 1px 6px;
    white-space: nowrap;
}
.kn-tlacitko-pri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 39px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--green-500);
    background: var(--green-500);
    color: var(--brown-700);
    font: 600 14px var(--font-body);
    cursor: pointer;
    white-space: nowrap;
}
.kn-tlacitko-pri:hover { background: var(--green-600); border-color: var(--green-600); }
.kn-tlacitko-pri:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
/* Zamčené, dokud pole čeká na odpověď (editor podmínek): proč, říká věta u řádku. */
.kn-tlacitko-pri:disabled,
.kn-tlacitko-pri:disabled:hover { opacity: .45; cursor: default; background: var(--green-500); border-color: var(--green-500); }

/* ── SKUPINOVÝ ŘÁDEK (ADR-0158 §A6, návrh `tr.grp` s `.gl` a `.gn`) ────────────────────────
   Společný oběma podobám tabulky. Klik sbalí nebo rozbalí, šipka se otočí o -90°. */
.tabulka tr.kn-grp td,
tr.kn-grp td {
    padding: 6px 10px;
    height: auto;
    background: var(--cream-50);
    border-bottom: 1px solid var(--border-hairline);
    cursor: pointer;
}
tr.kn-grp:focus-visible { outline: 0; }
tr.kn-grp:focus-visible td { box-shadow: inset 0 0 0 2px var(--green-300); }

/* KURZOR BUŇKY A NEŘADITELNÉ ZÁHLAVÍ Z KLÁVESNICE (OB-25, `js/nabidka.js`): buňka s nabídkou
   dostane fokus šipkami z řádku a záhlaví, které se neřadí, je zastávkou tabulátoru samo —
   klávesa Menu pak otevře nabídku právě jich. Fokus je vidět stejně jako u skupiny (varianta
   pod `.tabulka` přebije podbarvení vybraného řádku, které stín nese taky). */
td[data-nabidka]:focus-visible,
.tabulka td[data-nabidka]:focus-visible,
th[data-nabidka][tabindex]:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--green-300); }
.kn-grp-hlava { display: inline-flex; align-items: center; gap: 8px; }
.kn-grp-sipka {
    width: 13px;
    height: 13px;
    color: var(--brown-400);
    transition: transform .16s cubic-bezier(.4, 0, .2, 1);
}
tr.kn-grp.je-sbalena .kn-grp-sipka { transform: rotate(-90deg); }
tr.kn-grp .gl {
    font: 700 11.5px var(--font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--brown-500);
}
tr.kn-grp .gn {
    font: 700 11.5px var(--font-cisla);
    color: var(--brown-300);
    margin-left: 9px;
}

/* ── SLOUPEC NÁSTROJŮ, ČÍSLA A PATIČKA KNIHOVNÍ TABULKY (SPEC E12, návrh `table.tb`) ──────────
   POSLEDNÍ ZÁHLAVÍ JE VLASTNÍ SLOUPEC (návrh `<th style="width:70px">`): lupa řádku hledání
   a ikona Upravit sloupce. Každý řádek i patička mají na jeho místě prázdnou buňku. */
.kn-tabulka .tabulka thead th.kn-nastroje,
.kn-tabulka .tabulka td.kn-nastroje {
    width: 70px;
    padding-right: 8px;
    text-align: right;
    white-space: nowrap;
}
.kn-tabulka .tabulka thead th.kn-nastroje { padding-left: 0; }
/* Ve Střední podobě má sloupec nástrojů šířku z návrhu, 70 px: dvě ikony 26 px s mezerou (56 px),
   vpravo 8 a vlevo 6 px. Ikony stojí v toku, ne absolutně jako v návrhu, protože výšku záhlaví
   (~40,5 px) v návrhu dává sloupec zaškrtávátek, který seznam do E19 nemá. */
.kn-tabulka .tabulka.je-stredni thead th.kn-nastroje { padding-left: 6px; }

/* ── VÝBĚR ŘÁDKU (E19, prvek `VyberRadku`, návrh `th style="width:35px"` a `.cbx`) ─────────────
   První sloupec se zaškrtávátkem: v záhlaví „vybrat vše", v řádku výběr klienta. Buňka nemá
   kontextovou nabídku ani řazení. Zaškrtávátko je nativní, ale NE ve výchozí podobě: 16 px
   a zelené zaškrtnutí z tokenu jako v návrhu (`accent-color`). Okraje 3/3/3/4 px jsou výchozí
   okraje zaškrtávátka v prohlížeči, se kterými počítá návrh; tady jsou napsané výslovně, takže
   buňka má jako v návrhu 43 px (10 + 4 + 16 + 3 + 10) a nezávisí na prohlížeči. Vybraný řádek
   podbarvuje `tabulka.css` (`tr.je-vybrany`). */
.kn-tabulka .tabulka th.kn-vyber,
.kn-tabulka .tabulka td.kn-vyber {
    width: 35px;
    text-align: left;
    cursor: default;
}
.kn-cbx {
    width: 16px;
    height: 16px;
    margin: 3px 3px 3px 4px;
    accent-color: var(--green-700);
    cursor: pointer;
    vertical-align: middle;
}
.kn-cbx:disabled { cursor: default; }
.kn-cbx:focus-visible { outline: 0; box-shadow: var(--shadow-focus); border-radius: 3px; }

/* ČÍSLA VPRAVO ČÍSELNÝM PÍSMEM (návrh `table.tb .num`: Inter Tight 600, brown-700). */
.kn-tabulka .tabulka td.num {
    text-align: right;
    font-family: var(--font-cisla);
    font-weight: 600;
    color: var(--brown-700);
}
/* Dovětek „+ EUR" je v jednořádkové tabulce PŘED částkou: řádek je jeden a částky se mají
   srovnat u pravé hrany. Tlumeně a menším písmem — je to poznámka k číslu, ne druhá hodnota. */
.kn-tabulka .tabulka td .sl-mena-vic {
    display: inline;
    margin-right: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--brown-400);
}

/* PRUŽNÝ SLOUPEC (návrh `klell`): volný text (Popis, Adresa) bere zbylé místo a ořízne se, celý
   stojí v titulku. `max-width: 0` je způsob, jak buňce v tabulce s `width: 100%` říct „ber
   zbytek, ale nerozšiřuj tabulku". */
.kn-tabulka .tabulka td.sl-pruzny { max-width: 0; width: auto; }
.kn-tabulka .tabulka th.sl-pruzny { width: auto; }

/* JMÉNO a štítek povahy rodiny za ním (návrh `.rt`, ADR-0158 §B2). */
.kn-tabulka .tabulka .rt { font-weight: 600; color: var(--brown-700); }
.kn-tabulka .tabulka .kn-povaha { margin-left: 8px; vertical-align: middle; }
.kn-tabulka .tabulka .kn-stitek + .kn-stitek { margin-left: 5px; }

/* ČLOVĚK = kolečko s iniciálami a jméno vedle (návrh `.lp` + `.mini`); nepřiřazená rodina má
   kolečko prázdné a čárkované (návrh `.mini.none`), jinak by se jména ve sloupci rozjela. */
.kn-tabulka .sl-clovek { display: inline-flex; align-items: center; gap: 7px; color: var(--brown-500); }
.kn-tabulka .sl-clovek .ava { font-weight: 700; }
.kn-tabulka .sl-clovek .ava.je-prazdna { background: none; border: 1px dashed var(--border-hairline); color: transparent; }

/* PATIČKA (návrh `table.tb tfoot td`): krémová, s horní linkou, 14 px. Text první buňky
   („n z m klientů") smí přetéct přes sousední prázdné buňky (návrh `position: absolute`),
   jinak by roztáhl první sloupec. Součty po měnách stojí pod sebou, každá měna na řádku. */
.kn-tabulka .tabulka tfoot td {
    position: static;
    height: auto;
    padding: 10px;
    background: var(--cream-50);
    border-top: 1px solid var(--border-hairline);
    border-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--brown-700);
    vertical-align: top;
}
.kn-tabulka .tabulka tfoot td:not(:last-child) { border-right: 0; }
.kn-tabulka .kn-pata-misto { position: relative; display: block; height: 1.4em; }
.kn-tabulka .kn-pata-text {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    font-weight: 400;
    /* Věta v patičce („Vybráno 2 z 9", „9 klientů") má číslice proporcionální jako návrh (`footL
       .muted`); stejně široké číslice tabulky (`tabulka.css`) patří sloupcům čísel, ne větě (E19). */
    font-variant-numeric: normal;
    color: var(--brown-400);
}
.kn-tabulka .kn-pata-castka { display: block; white-space: nowrap; }

/* PATIČKA S VÝBĚREM (E19, návrh `footL`, „Zrušit výběr" a `kl.msg`): odkaz 13,5 px bez odsazení
   a s řádkováním tlačítka (návrh `.lnk` s `padding:0;font-size:13.5px`), zpráva o úspěchu
   zeleně tučně, klidná zpráva brown-500. Stojí v témže `kn-pata-text` za počtem, mezeru 12 px
   dává jeho flex. */
.kn-tabulka .kn-pata-text .kn-lnk { padding: 0; font-size: 13.5px; line-height: normal; }
.kn-tabulka .kn-pata-text .kn-lnk:disabled { opacity: .42; cursor: default; text-decoration: none; }
.kn-tabulka .kn-pata-zprava { color: var(--brown-500); }
.kn-tabulka .kn-pata-zprava.je-uspech { color: var(--green-700); font-weight: 600; }

/* ŘÁDKY POD TABULKOU (E19, V13): odmítnutí a poruchy hromadné akce. Věty brány jsou dlouhé, takže
   se zalamují; prázdná živá oblast nezabírá místo (odstup nesou jen řádky). */
.kn-pod-tabulkou p {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--brown-500);
}

/* ── DIALOG „SLOUPCE TABULKY" (ADR-0158 §A14, návrh `kl.cd`) ─────────────────────────────
   Hlavu a patičku kreslí prvek `Dialog` (dialog.css); tělo je vlastní, protože má jiný tvar než
   formulář: vlevo hledání a skupiny (návrh `.mcol`), vpravo tabulka pořadí bez vlastního odsazení
   (návrh `.mside { padding: 17px 0 14px }`), širší než formulářový panel (420 px proti 383). */
.mck .kn-sloupce { --kn-sloupce-pravy: 420px; }
.mck .kn-sloupce-telo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--kn-sloupce-pravy, 420px);
    min-height: 0;
    overflow: auto;
}
.mck .kn-sloupce-vlevo { padding: 17px 24px 21px; min-width: 0; }
.mck .kn-sloupce-vpravo {
    padding: 17px 0 14px;
    border-left: 1px solid var(--border-hairline);
    background: var(--cream-50);
    min-width: 0;
}
.mck .kn-vstup.kn-sloupce-hledani { height: 38px; padding: 9.5px 14px; font-size: 14px; font-weight: 500; }
/* Zaoblení drží i ve fokusu: globální `.mck :focus-visible` mu dává 3 px, a dialog se otevírá
   právě s fokusem v tomhle poli (návrh `.fld input` má 12 px i zaostřené). */
.mck .kn-vstup.kn-sloupce-hledani:focus-visible { border-radius: var(--radius-md); }
.mck .kn-sloupce-skupiny {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0 26px;
    align-items: start;
}
.mck .kn-sloupce-skupina { margin-bottom: 8px; }
/* Nadpis skupiny (návrh `.sgh`) s počtem „n z m" vpravo. */
.mck .kn-sloupce-sgh {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 9px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-hairline);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brown-300);
}
.mck .kn-sloupce-volby { display: flex; flex-direction: column; gap: 8px; }
.mck .kn-sloupce-volba {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--brown-600);
    cursor: pointer;
}
.mck .kn-sloupce-volba input { width: 16px; height: 16px; accent-color: var(--green-600); margin: 0; cursor: pointer; }
.mck .kn-sloupce-vse { padding: 0; margin-top: 10px; font-size: 13px; }
.mck .kn-sloupce-nic { margin: 0; padding: 8px 0; font-size: 14px; color: var(--brown-400); }
.mck .kn-sloupce-mlab {
    display: flex;
    gap: 8px;
    padding: 0 22px;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brown-400);
}
.mck .kn-sloupce-poradi .tabulka tbody td,
.mck .kn-sloupce-poradi .tabulka tbody tr:nth-child(even) td { background: transparent; }
.mck .kn-sloupce-poradi .tabulka td:not(:last-child) { border-right: 0; }
/* Úchyt je tlačítko 26 px (klávesová obdoba tažení, OB-25), návrh má jen ikonu: odsazení 4 px
   dá sloupci šířku z návrhu (34 px) a tečky stojí na témže místě. */
.mck .kn-sloupce-poradi td.kn-sloupce-uchyt { width: 26px; padding-left: 4px; padding-right: 4px; text-align: center; color: var(--brown-300); }
.mck .kn-sloupce-poradi td.kn-sloupce-uchyt svg { width: 14px; height: 14px; vertical-align: middle; }
.mck .kn-sloupce-poradi td.kn-sloupce-x { width: 44px; text-align: right; }
.mck .kn-sloupce-poradi .kn-sloupce-nazev { font-weight: 600; color: var(--brown-700); }
.mck .kn-sloupce-poradi tr.je-tazitelny td:first-child { cursor: grab; }
.mck .kn-sloupce-poradi tr.je-tazeny td { opacity: .4; }
.mck .kn-sloupce-poradi tr.je-cil-nad td { box-shadow: inset 0 2px 0 var(--green-500); }
.mck .kn-sloupce-poradi tr.je-cil-pod td { box-shadow: inset 0 -2px 0 var(--green-500); }

/* ── ULOŽENÉ POHLEDY (ADR-0158 §A13, SPEC E15; návrh `kl.views`, `.fchip`, `.fsave`, `kl.sv`) ──
   Řada chipů stojí v řádku hlavičky vedle hledání, za svislou čárkou. Chip je `.fchip` z návrhu
   (32 px, bílý, vlasový rám), otevřený `.fchip.sel` (zelený, tučnější), počet číselným písmem
   se sníženou sytostí, „upraveno" drobněji. Uložit změny / Uložit filtr jako pohled jsou `.fsave`
   (čárkovaný rám, v návrhu inline výška 32 px), ostatní akce odkazy `.lnk`. */
.kn-pohledy {
    display: flex;
    align-items: center;
    gap: 9.5px;
    flex-wrap: wrap;
    min-width: 0;
}
.kn-pohled {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--white);
    font: 500 14px var(--font-body);
    color: var(--brown-500);
    cursor: pointer;
    white-space: nowrap;
}
.kn-pohled:hover { border-color: var(--brown-300); }
.kn-pohled.je-vybrany {
    background: var(--green-100);
    border-color: var(--green-300);
    color: var(--green-700);
    font-weight: 600;
}
.kn-pohled .n { font-family: var(--font-cisla); font-weight: 700; opacity: .6; }
.kn-pohled:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.kn-pohled-upraveno { font-size: 12.5px; font-weight: 500; color: var(--brown-400); }
.kn-pohled-ulozit {
    height: 32px;
    padding: 0 15px;
    border-radius: var(--radius-pill);
    border: 1px dashed var(--border-hairline);
    background: transparent;
    font: 600 14px var(--font-body);
    color: var(--brown-400);
    cursor: pointer;
    white-space: nowrap;
}
.kn-pohled-ulozit:hover { border-color: var(--green-500); color: var(--green-700); }
.kn-pohled-ulozit:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.kn-lnk.kn-pohled-novy { color: var(--brown-400); }
.kn-pohledy-smazano { font-size: 14px; color: var(--brown-400); white-space: nowrap; }
/* Věta k otevřenému pohledu (jen ke čtení, nepoužité podmínky) — PÍŠE SE, neschovává do `title`.
   Stojí na vlastním řádku pod chipy a ZALAMUJE SE DO JEJICH ŠÍŘKY: `contain: inline-size` jí
   bere vlastní šířku textu z výpočtu řádku hlavičky. Bez toho by dlouhá věta roztáhla řadu
   chipů přes celou hlavičku a ta by se rozpadla na tři řádky (nadpis, hledání, akce; změřeno
   v prohlížeči na 1440 px). */
.kn-pohledy-veta { flex-basis: 100%; contain: inline-size; font-size: 13px; line-height: 1.4; color: #a8741a; }
.kn-pohledy-veta.je-chyba { flex-basis: auto; contain: none; white-space: nowrap; }

/* Dialog Uložit / Upravit pohled (návrh `.mdl` 600 px, tělo `.mcol`). Popisky bloků jsou `.mlab`
   (13 px, prostrkání .1em, kapitálky); SVISLÝ RYTMUS drží prvek `Formulář` (popisek = nadpis
   skupiny: 16 nad ním, 9 pod ním), ne vlastní okraje — návrh má 18 / 7, rozdíl 2 px je vědomý. */
.mck .kn-pohled-mlab {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brown-400);
}
.mck .kn-pohled-drobky { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mck .kn-pohled-dlg .kn-pohled-drobky .kn-fac { padding-right: 13px; }
.mck .kn-pohled-dlg .kn-seg { align-self: flex-start; }
.mck .kn-pohled-muted { font-size: 14px; color: var(--brown-400); }
.mck .kn-pohled-volby { display: flex; flex-direction: column; gap: 9px; }
.mck .kn-pohled-volba {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--brown-600);
    cursor: pointer;
}
.mck .kn-pohled-volba input { width: 16px; height: 16px; accent-color: var(--green-600); margin: 0; cursor: pointer; }
.mck .kn-pohled-varovani { font-size: 13px; line-height: 1.45; color: #a8741a; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   KOLEČKO ČLOVĚKA — prvek `Avatar` (ADR-0131, ADR-0164)

   Jedno kolečko pro celou aplikaci: horní pruh, seznam a karta klienta, karta tiketu,
   komentář, deník položky i „Váš poradce" v klientské tváři. Velikost se řídí doplňkovou
   třídou, ne opisováním pravidel na každém místě.

   ZÁKLAD JE V `:where()` (nulová specificita): kolečko se často kreslí s třídou MÍSTA
   (`kk-ava`, `dm-log-ava`, `wallmono`) a ta má nad ZÁKLADEM PRVKU vyhrát bez ohledu na to,
   ve kterém listu a v jakém pořadí stojí. Do 2. 10. 2026 bydlel základ v `backoffice-mock.css`,
   tedy PŘED listy, které ho přebíjejí — přesun do knihovny by bez `:where()` pořadí obrátil.

   NAD CIZÍM PRAVIDLEM TŘÍDA MÍSTA VYHRÁT NEMUSÍ. `:where()` vynuluje jen tenhle základ; pravidlo
   jiného listu, které míří na `.ava` přes předka (`.onb .ava`), má specificitu jako třída místa
   s předkem (`.onb .wallmono`) a vyhraje, když stojí později — tak kolečko „Váš poradce"
   v průvodci 2. 10. 2026 dostalo 32 px a krémovou místo 42 px zelené. Pravidlo na `.ava` mimo
   tenhle blok proto smí jen jmenovitě a na své místo (`AvatarCssMistoTests`); podobu kolečka
   na konkrétním místě řídí TŘÍDA MÍSTA, ne `.předek .ava`.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
:where(.ava) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cream-200);
    color: var(--brown-600);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    overflow: hidden;
    flex: 0 0 auto;
    position: relative;
}

/* FOTKA LEŽÍ PŘES INICIÁLY (prvek je kreslí vždycky): účaří kolečka je pak s fotkou i bez ní
   stejné a řádek vedle jména se nezvedne. `cover`: prohlížeč zmenšuje se zachovaným poměrem
   stran, takže fotka není čtverec — dořízne ji až tohle. */
.ava-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.ava.je-mala { width: 22px; height: 22px; font-size: 9px; }
/* 26 px = návrhový `.mini`: fotka jako ODZNAK údaje v panelu (řešitel, sledující). Mezi
   „malá" (22, hustá tabulka) a „velká" (34, avatar u záznamu vlákna) chyběla — a 22 px vedle
   14px hodnoty vypadalo jako drobek, ne jako člověk. */
.ava.je-stredni { width: 26px; height: 26px; font-size: 12px; }
.ava.je-velka { width: 34px; height: 34px; font-size: 12px; }

/* VYPLNÍ KOLEČKO MÍSTA. Místo, které si kolečko kreslí samo (velikost, barva, prstenec
   ve scoped CSS stránky), obalí prvek a ten jen vyplní jeho plochu: iniciály převezmou
   písmo a barvu místa, fotka se dořízne do jeho kruhu. */
:where(.ava).je-vypln {
    width: 100%;
    height: 100%;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

/* NIKDO (nepřiřazená rodina, návrh `.mini.none`): kolečko zůstává, jen prázdné a čárkované —
   vynechat ho by rozhodilo svislici jmen ve sloupci. Otazník, který `Iniciraly.Z("")` vrací
   místo prázdna, je průhledný: kroužek drží šířku, ale „kdo?" říká slovo vedle. */
.ava.je-prazdna { background: none; border: 1px dashed var(--border-hairline); color: transparent; }