/* ═══════════════════════════════════════════════════════════════════════════════════════
   PODOBA DIALOGU — JEDNO MÍSTO PRO CELÝ BACK OFFICE (17. 8. 2026)

   Zakládání záznamu se dělá nativním <dialog> + showModal() (CLAUDE.md, jmenovitá výjimka
   z pravidla „žádné popupy"): prohlížeč sám řeší zatemnění pozadí, past na fokus i Escape.
   Tenhle list říká, JAK takový dialog vypadá; kdo ho staví, jen skládá značky `dlg-*`.

   PROČ GLOBÁLNĚ A NE VE SCOPED CSS. Do 17. 8. 2026 tahle pravidla bydlela ve
   `Backlog.razor.css`, tedy ve scoped listu JEDNÉ stránky. Blazor takovému pravidlu přilepí
   značku scope a dá ji jen prvkům z Backlog.razor — jakmile týž dialog potřebovala druhá
   obrazovka (zakládání rodiny), nesedlo by na něj ani jedno pravidlo: vykreslil by se jako
   holé HTML, build zelený, žádné varování (přesně ta past, kterou hlídá ScopedCssDosahTests).
   Druhá možnost — pravidla opsat — je horší: dvě kopie téhož vzhledu se do měsíce rozejdou
   a nikdo si toho nevšimne, protože každou vidí jiná obrazovka.

   Že podoba zůstane na jednom místě, hlídá `PodobaDialoguTests`.

   Prefix `.mck` je zdejší konvence back-office listů (mockup je odscopovaný pod `.mck`,
   viz backoffice-mock.css) a zároveň drží specifičnost, kterou pravidla měla jako scoped —
   bez něj by je přebily plošné `.mck …` rovnice o vlastnosti navíc.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── ZAKLÁDACÍ DIALOG (15. 8. 2026) ──────────────────────────────────────────────────────
   Nahradil trvalý pravý panel: ten bral 350 px na každé návštěvě boardu, takže se šest
   sloupců do zbytku nevešlo a poslední dva se ořezávaly. Nativní <dialog> + `showModal()`
   řeší zatemnění, past na fokus i Escape za nás. */
/* ZÁKLAD TEXTU V DIALOGU je z návrhu (`.af`: 16 px, řádkování 1,55, brown-600), ne z back
   office (13 px, brown-900). Dědí ho všechno, co si velikost nestanoví samo — a přesně na tom
   se rozcházela odsazení: návěstí „PŘÍLOHY" bylo o 1,3 px nižší, protože zdejší základ má
   řádkování 1,45. Prvky s vlastní velikostí (pole, tlačítka, tabulky) se tím nemění. */
.mck .dlg {
    width: min(980px, 94vw);
    max-height: 90vh;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--brown-600);
    font-size: var(--text-md);
    line-height: 1.55;
    box-shadow: var(--shadow-lg);
}

.mck .dlg::backdrop { background: rgba(46, 35, 26, .45); }

/* Dialog TIKETU je širší — 1230 px z návrhu (`.mdl`). Na kroku 3 stojí vedle sebe sloupec
   návrhu (847) a panel zařazení (383); v 980 px se panel mačkal a pole v něm se ořezávala.
   Ostatní dialogy (epika, sprint, rodina) mají méně polí a zůstávají na 980. */
.mck .dlg-tiket { width: min(1230px, 94vw); }

.mck .dlg-form { display: flex; flex-direction: column; max-height: 90vh; }

/* Hlava je KRÉMOVÝ PRUH s vlasovou linkou dole (návrh `.mhd`, 21. 8. 2026) — do té doby byla
   průhledná, takže hlava, tělo a patička splývaly v jednu bílou plochu a nebylo poznat, co
   z dialogu roluje a co stojí. Čísla jsou z návrhu, ne zaokrouhlená na naše kroky mřížky. */
.mck .dlg-hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 19px 26px 16px;
    border-bottom: 1px solid var(--border-hairline);
    background: var(--cream-50);
}

/* Hlava dialogu TIKETU je blok, ne řádek: pod řádkem s přepínačem stojí ještě název a úvodní
   věta wizardu (návrh `.mhd` = `.mhr` + `.mti` + `.aihint`). Ostatní dialogy mají v hlavě
   jen ten jeden řádek, takže si modifikátor neberou. */
/* PEVNÁ VÝŠKA HLAVY = DIALOG SE PŘI PŘEPNUTÍ REŽIMU NEHNE VŮBEC (25. 8. 2026, ALF-5).

   VĚDOMÁ ODCHYLKA OD NÁVRHU, rozhodl uživatel. Návrh se totiž mění taky: jeho hlava má
   136 px s wizardem a 143 px ručně, protože pole názvu (50 px) je vyšší než úvodní věta
   wizardu (45 px) — změřeno part po partu, naše čísla s návrhem seděla na pixel. Pavel ale
   v ALF-5 napsal, že „přepínání mezi variantama nemá měnit velikost dialogu", a to je
   požadavek na CHOVÁNÍ, ne na pixel.

   Cena: hlava wizardu je proti návrhu o 7 px vyšší. Kdyby se to mělo srovnat obráceně
   (tedy v návrhu), je to změna u Pavla — vyrovnat výšku úvodní věty a pole názvu. */
.mck .dlg-hlava.je-blok { display: block; min-height: 143px; }
.mck .dlg-hlava-radek { display: flex; align-items: center; gap: 12px; }

/* Úvodní věta wizardu (návrh `.aihint`). Patří do HLAVY, ne do těla — tělo roluje a věta,
   která říká, co se po člověku chce, by odrolovala mimo. */
.mck .dlg-uvod {
    margin: 12px 0 0;
    max-width: 660px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--brown-400);
}

.mck .dlg-zavrit {
    border: 0; background: transparent; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--text-muted);
    padding: 2px 6px; border-radius: var(--radius-sm);
}

.mck .dlg-zavrit:hover { background: var(--cream-200); color: var(--brown-700); }

/* Název je NADPIS, ne řádek formuláře — první a nejdůležitější věc, kterou člověk píše.
   Podtržení místo rámečku: pole se má chovat jako místo k psaní, ne jako kolonka. */
/* Název je NADPIS (návrh `.mti`): 28 px displejovým písmem, podtržení místo rámečku.
   Uvnitř hlavy, takže vodorovné odsazení dělá ona — proto jen svislé. */
.mck .dlg-nazev {
    width: 100%;
    margin: 14px 0 0;
    padding: 2.5px 0 10.5px;
    border: 0;
    border-bottom: 1px solid var(--border-hairline);
    background: transparent;
    font: var(--fw-semibold) 28px / 1.3 var(--font-display);
    letter-spacing: -.01em;
    color: var(--brown-700);
}

.mck .dlg-nazev:focus { outline: 0; border-bottom-color: var(--color-accent); }
.mck .dlg-nazev::placeholder { color: var(--brown-300); }

/* Dvě části: vlevo to, co se píše (popis, přílohy), vpravo zařazení. Roluje POUZE tělo —
   hlavička s názvem a patička s tlačítky musí zůstat vidět i u dlouhého popisu.

   Odsazení nese SLOUPEC, ne tělo (návrh `.mbody` bez paddingu, `.mcol` 21/26/26,
   `.mside` 21/23/26): pravý sloupec má krémové pozadí, které musí sahat od hrany k hraně
   a odshora dolů. S paddingem na těle by kolem něj zůstal bílý rám. */
/* PEVNÁ VÝŠKA TĚLA (25. 8. 2026, ALF-5 — vytkl Pavel: „přepínání mezi variantama nemá měnit
   velikost dialogu"). Návrh to řeší jediným řádkem `.mbody { height: 60vh }`, tedy v OBOU
   režimech stejně: dialog má pořád touž velikost a obsah se roluje uvnitř. Bez toho rostl
   ručním formulářem (o 124 px), a po zúžení polí se naopak o 64 px zmenšil — pokaždé to
   pod rukou poskočí. */
.mck .dlg-telo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 383px;
    height: 60vh;
    overflow: auto;
    min-height: 0;
}

.mck .dlg-vlevo, .dlg-vpravo { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* ODSTUPY V RUČNÍM FORMULÁŘI PODLE NÁVRHU (25. 8. 2026, ALF-5). Návrh sloupec neskládá flexem:
   popisek má `margin-bottom: 7px` a jen skupina příloh `margin-top: 19px`. U nás se k těm 7 px
   přičítala ještě flexová mezera 12, takže každý popisek stál o 12 px níž — a obsah přerostl
   tělo dialogu o 16 px, což na notebooku (okno 860 px) naskočilo jako posuvník. Návrhu se to
   na téže výšce nestane.

   Zúženo na `:not(.je-navrh)`, tedy JEN ruční formulář: obrazovka návrhu je proti návrhu
   změřená jako shodná (`porovnat.py wizard`) a nemá se hnout. */
.mck .dlg-vlevo:not(.je-navrh) { gap: 0; }
.mck .dlg-vlevo:not(.je-navrh) > .dlg-navesti:not(:first-child) { margin-top: 19px; }

/* TÝŽ MODEL ODSTUPŮ V PRAVÉM PANELU. Návrh (změřeno na jeho vlastní obrazovce): za nadpisem
   skupiny 10 px, mezi poli 13, před dalším nadpisem 21. U nás byla všude jedna flexová mezera
   12 — panel tím narostl o 16 px, přerostl tělo dialogu a naskočil posuvník (vytkl uživatel;
   levý sloupec se přitom vejde, výšku určoval tenhle panel). */
.mck .dlg-vpravo:not(.je-navrh) { gap: 0; }
.mck .dlg-vpravo:not(.je-navrh) > * { margin-bottom: 13px; }
.mck .dlg-vpravo:not(.je-navrh) > .dlg-sekce { margin-top: 21px; margin-bottom: 10px; }
.mck .dlg-vpravo:not(.je-navrh) > .dlg-sekce:first-child { margin-top: 0; }
.mck .dlg-vpravo:not(.je-navrh) > :last-child { margin-bottom: 0; }

.mck .dlg-vlevo { padding: 21px 26px 26px; }

/* Odstupy z návrhu: mezi bloky levého sloupce 19 px (`margin-top:19px` u obalů), mezi poli
   panelu 13 px (`.fld { margin-bottom: 13px }`). */
.mck .dlg-vlevo.je-navrh { gap: 19px; }
.mck .dlg-vlevo.je-navrh > .dlg-pripravenost { margin: 0; }
.mck .dlg-vpravo { gap: 13px; }

.mck .dlg-vpravo {
    padding: 21px 23px 26px;
    border-left: 1px solid var(--border-hairline);
    background: var(--cream-50);
}

/* Popisek pole (návrh `.fld label`): 13 px, prostrkání .1em, brown-400, 6 px k poli.
   Pravidlo je psané na `label` schválně — `.dlg-popisek` má o typový selektor MÍŇ a prohrálo
   by (týž vzor, jakým si přepínač držel staré hodnoty). */
.mck .dlg-telo label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.55;
    letter-spacing: .1em;
    color: var(--brown-400);
}
.mck .dlg-telo .pole { font-size: var(--text-sm); }
.mck .dlg-telo textarea.pole { min-height: 180px; resize: vertical; }

/* Patička je KRÉMOVÝ PRUH jako hlava (návrh `.mft`) — dialog tím dostane hlavu, tělo a nohu;
   do 21. 8. 2026 byla průhledná a tlačítka visela na bílé ploše popisu. */
.mck .dlg-pata {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 26px;
    border-top: 1px solid var(--border-hairline);
    background: var(--cream-50);
}

.mck .dlg-napoveda { font-size: var(--text-2xs); }

/* Počitadlo v patičce (návrh `.kbd`) — orámovaná kapsle, ne plavající text: je to údaj
   o stavu, ne věta, a v řadě tlačítek se holý text čte jako vypnutý odkaz. */
.mck .dlg-kapsle {
    padding: 1px 6px;
    border: 1px solid var(--border-hairline);
    border-radius: 4.5px;
    font-family: var(--font-cisla);
    font-size: 13px;
    font-weight: var(--fw-semibold);
    /* Řádkování se dědí (1,55) — zkratka `font:` by ho přepsala na `normal` a kapsle by
       byla o 4 px nižší. Přesně tak se to poprvé rozešlo. */
    line-height: 1.55;
    color: var(--brown-300);
    white-space: nowrap;
}

/* Na úzké obrazovce jde zařazení pod popis — dvousloupcový dialog by se nevešel. */
@media (max-width: 860px) {
    .mck .dlg-telo { grid-template-columns: minmax(0, 1fr); }
    .mck .dlg-vpravo { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-hairline); padding-top: var(--space-4); }
}

/* ── Dialog: sekce, přepínač druhu, vazby a štítky (mockup) ─────────────────────────────── */
/* Číslo tiketu (návrh `.idchip`): kapsle s obrysem, 28 px vysoká. `margin-left: auto` dělá
   totéž co návrhový `.fsep` — odsune číslo a křížek doprava. */
.mck .dlg-cislo {
    display: inline-flex;
    align-items: center;
    height: 28px;
    margin-left: auto;
    padding: 0 12px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--cream-100);
    color: var(--brown-400);
    font: var(--fw-bold) 13px var(--font-cisla);
    letter-spacing: .06em;
    white-space: nowrap;
}

/* Nadpis sekce dělí panel na Zařazení / Plánování / Vazby — bez nich je to patnáct polí pod
   sebou a nikdo nepozná, které spolu souvisí. Čísla z návrhu (`.sgh`). */
.mck .dlg-sekce {
    margin: 21px 0 10.5px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-hairline);
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brown-300);
}

.mck .dlg-sekce:first-child { margin-top: 0; }

/* NÁVĚSTÍ NAD BLOKEM v levém sloupci (návrh `.mlab`) — „Popis", „Přílohy", „Kroky
   k reprodukci", „Akceptační kritéria". Není to nadpis SEKCE panelu (`.dlg-sekce` = `.sgh`,
   který má linku pod sebou a dělí sloupec zařazení): tohle jen pojmenuje blok pod sebou,
   takže žádná linka a o půl stupně větší písmo. Dvě různé věci, dvě třídy — jedna se
   používala na obojí a v každém místě jí něco chybělo. */
.mck .dlg-navesti {
    display: block;
    margin-bottom: 7px;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.55;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brown-400);
}

/* Doplněk návěstí („návrh Alfréda", „2 ze 4 potvrzeno") — návrhové `.dnote`: zeleně,
   drobně, za textem návěstí. Říká, ODKUD obsah pod ním je. */
.mck .dlg-dovetek {
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--green-700);
}

.mck .dlg-popisek {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-3xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--barva-text-tlumeny);
}

.mck .dlg-dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* Přepínač (druh tiketu i způsob zakládání) má JEDNU sadu pravidel — je to týž návrhový
   prvek `.dseg`. Do 21. 8. 2026 byly sady dvě: starší psaná na `.dlg-prepinac button`
   a novější na `.dlg-prepinac-tl`. Starší měla o jeden typový selektor víc, takže
   PŘEBÍJELA novější — přepínač způsobu zakládání se kreslil 12,5px/500 místo 14px/600
   a byl o 39 px užší než návrh. Build zelený, nikde varování; poznalo se to až měřením. */

.mck .dlg-vazba { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.mck .dlg-vazba-popisek { font-size: var(--text-2xs); color: var(--barva-text-tlumeny); white-space: nowrap; }

.mck .dlg-vazby-seznam { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mck .dlg-vazby-seznam li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-2xs);
    color: var(--brown-600);
}
.mck .dlg-vazby-seznam li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mck .dlg-stitky { display: flex; flex-wrap: wrap; gap: 5px; }







.mck .dlg-zadal { margin: var(--space-4) 0 0; font-size: var(--text-3xs); }

/* „Zrušit" je vpravo (mockup) — je to odchod, ne třetí způsob uložení. */
.mck .dlg-zrusit-tlac { margin-left: var(--space-3); }


/* Pole v pravém sloupci se MUSÍ umět zúžit: `<select>` má vlastní vnitřní minimální šířku
   podle nejdelší položky, takže bez `min-width: 0` vytlačil sloupec za okraj dialogu
   (změřeno: dva prvky končily mimo). */
.mck .dlg-vpravo .dlg-popisek,
.mck .dlg-vpravo .dlg-dvojice,
.mck .dlg-vpravo .dlg-vazba { min-width: 0; }

.mck .dlg-vpravo .pole,
.mck .dlg-vpravo select,
.mck .dlg-vpravo input { min-width: 0; max-width: 100%; }

/* Chyba v zakládacím dialogu. Sedí nad tlačítky, protože tam se člověk dívá po kliknutí —
   nahoře u titulku by ji přehlédl (16. 8. 2026). */
.mck .dlg-chyba {
    margin: 0 var(--space-5) var(--space-2);
    padding: 8px 12px;
    border: 1px solid var(--danger);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--danger) 8%, var(--white));
    color: var(--brown-900);
    font-size: 12.5px;
}

/* ── ZAKLÁDÁNÍ S ALFRÉDEM (ALF-9; podoba 1:1 s návrhem `dseg`, 20. 8. 2026) ───────────────
   Přepínač v hlavičce dialogu — kapsle na krémové dráze, aktivní BÍLÁ se stínem. Zelená
   AI kapsle z 16. 8. padla spolu s výchozím ručním režimem: zvýraznění mělo smysl jen
   jako nabídka vedle výchozí volby, teď je AI to místo, kde člověk přistane. */
.mck .dlg-prepinac {
    display: inline-flex;
    align-items: center;
    gap: 2.5px;
    padding: 3.5px;
    margin-left: var(--space-3);
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: var(--cream-100);
}

.mck .dlg-prepinac button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--brown-500);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.mck .dlg-prepinac button:hover { color: var(--brown-700); }

/* Zvolená kapsle je BÍLÁ se stínem (návrh `.dseg button.on`). Dva názvy téhož stavu:
   `je-aktivni` u způsobu zakládání, `je-vybrany` u druhu tiketu. */
.mck .dlg-prepinac button.je-aktivni,
.mck .dlg-prepinac button.je-vybrany {
    background: var(--white);
    color: var(--brown-700);
    box-shadow: var(--shadow-xs);
}

/* Roztažená varianta (návrh `dseg.full`) — přepínač druhu v pravém sloupci: kapsle přes
   celou šířku, volby stejným dílem. Ruší i odsazení zleva, které patří jen hlavičce. */
.mck .dlg-prepinac.je-plny { display: flex; width: 100%; margin-left: 0; }
.mck .dlg-prepinac.je-plny button {
    flex: 1;
    justify-content: center;
    gap: 6px;
    padding: 0 7px;
    font-size: var(--text-xs);
}

/* Eyebrow dialogu (návrh): verzálky s prostrkáním v zelené — kotva „kde jsem",
   ne nadpis. */
.mck .dlg-hlava .eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green-700);
    white-space: nowrap;
}

/* Vedlejší akce patičky jako ODKAZY (návrh `lnk`) — tlačítko vedle tlačítka soupeřilo
   s hlavní akcí. `dlg-mezera` je návrhový `fsep`: roztáhne se a odsune Zrušit doprava. */
.mck .dlg-odkaz {
    border: 0;
    background: transparent;
    padding: 1px 6px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: normal;
    color: var(--green-700);
    cursor: pointer;
}
.mck .dlg-odkaz:hover:not(:disabled) { color: var(--green-600); }
.mck .dlg-odkaz:disabled { opacity: .5; cursor: default; }
.mck .dlg-mezera { flex: 1; }

/* Tlačítka v patičce mají rozměry z návrhu (`.ico-btn`: 39 px, radius 12, 600/14). Pravidlo
   platí JEN v patičce dialogu — `.tlacitko` je plošná třída celého back office a přepsat ji
   kvůli jednomu dialogu by překreslilo obrazovky, které s tímhle nemají nic společného. */
.mck .dlg-pata .tlacitko {
    height: 39px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    font: var(--fw-semibold) var(--text-sm) var(--font-body);
}

/* Přílohy na kroku 1 jsou v návrhu UVNITŘ sloupce, 19 px pod polem zadání. U nás je kreslí
   stránka jako sourozence komponenty rozboru, takže se odsazení skládá ze dvou dílů —
   proto se rozboru bere spodní padding právě tehdy, když za ním přílohy stojí. */
.mck .dlg-ai-prilohy { padding: 19px 26px 26px; }
.mck .dlg-tiket .ntr:has(+ .dlg-ai-prilohy) { padding-bottom: 0; }

/* Tělo wizardu = návrhové `.mbody` v jednosloupcové podobě: pevná výška, roluje uvnitř. */
.mck .dlg-wizard { height: 60vh; overflow: auto; min-height: 0; }

/* Doptání má výšku jen jako STROP (návrh `.aiwrap`) — dvě otázky nemají nechat půl dialogu
   prázdného, čtyři se do 60 vh vejdou a nad ním se roluje. */
.mck .dlg-wizard.je-volna-vyska { height: auto; max-height: 60vh; }

/* Hlavní tlačítko v patičce je LIMETKOVÉ (návrh `.ico-btn.pri`: green-500 s hnědým textem).
   Plošné `.mck .tlacitko-primarni` je tmavší zelená s bílým textem — tady se přebíjí
   jmenovitě, aby se plošná třída nemusela měnit kvůli jednomu dialogu. */
.mck .dlg-pata .tlacitko-primarni {
    background-color: var(--green-500);
    border-color: var(--green-500);
    color: var(--brown-700);
}

.mck .dlg-pata .tlacitko-primarni:hover:not(:disabled) {
    background-color: var(--green-600);
    border-color: var(--green-600);
    color: var(--brown-700);
}

/* Vypnuté tlačítko ZTMAVLÉ, ne šedé (návrh `.ico-btn.off`) — pořád je to ono tlačítko,
   jen na něj ještě není proč sahat. */
.mck .dlg-pata .tlacitko:disabled { opacity: .45; }

/* Čtvereček druhu v přepínači (návrh `sq`, 14×14) — táž barva jako štítek v tabulce a na boardu. */
/* `.dlg-druh-ctverec` odešel 25. 8. 2026 (ALF-5): návrh čtvereček u druhu nevykresluje
   — v markupu ho má, ale v nulové velikosti. Barva druhu zůstává v tabulce a na boardu. */

/* Připravenost k zadání (ALF-9 E3) — pruh, počet a co chybí, na jednom řádku pod názvem. */
/* Připravenost k zadání — čísla z návrhu (`.rdy`): ohraničený krémový pruh, uvnitř popisek,
   96px ukazatel, počet a pak pilulky s tím, co chybí. */
.mck .dlg-pripravenost {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin: 0 26px 19px;
    padding: 11px 15px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--cream-50);
}

/* Uvnitř těla (obrazovka návrhu) si odsazení nese sloupec, takže pruh ho mít nesmí. */
.mck .dlg-vlevo > .dlg-pripravenost { margin: 0 0 19px; }

.mck .dlg-pripravenost-stitek {
    font-size: 12.5px;
    font-weight: var(--fw-bold);
    /* Návrh to píše zkratkou `font:`, takže řádkování je `normal` — s dědeným 1,55 byl
       pruh o 6 px vyšší. */
    line-height: normal;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brown-500);
}

.mck .dlg-pripravenost-pruh { width: 96px; height: 4.5px; border-radius: 2.5px; background: var(--cream-200); overflow: hidden; }
.mck .dlg-pripravenost-vypln { display: block; height: 100%; background: var(--green-500); transition: width var(--dur-normal) ease; }
.mck .dlg-pripravenost-pocet { font-family: var(--font-cisla); font-size: 15px; font-weight: var(--fw-semibold); line-height: normal; color: var(--brown-700); }

/* Co chybí — vysloveno, ne jen napočítáno. Bez toho je „5 ze 7" hádanka. */
.mck .dlg-chybi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3.5px 11px;
    border: 1px solid var(--border-hairline);
    border-radius: 999px;
    background: var(--white);
    font-size: var(--text-xs);
    color: var(--brown-500);
}

/* ── KARTA NÁVRHU (návrh `.dcard`) ────────────────────────────────────────────────────────
   Bílá karta se ZELENÝM PRUHEM vlevo: „tohle napsal Alfréd, ne vy". ADR-0095 svislý barevný
   pruh u karet zakázal — u karet POLOŽKY, kde nesl jen ozdobu. Tady nese význam, a je to
   jmenovitá výjimka (viz ADR k této obrazovce): na jedné obrazovce stojí vedle sebe text
   od modelu a pole vyplněná člověkem, a rozdíl mezi nimi je to jediné, co říká, co ověřovat. */
.mck .dlg-karta {
    padding: 13px 16px;
    border: 1px solid var(--border-hairline);
    border-left: 3px solid var(--green-500);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--brown-600);
}

.mck .dlg-karta > :first-child { margin-top: 0; }
.mck .dlg-karta > :last-child { margin-bottom: 0; }

/* Velikost nesou ODSTAVCE, ne karta (návrh to má inline na `<p>`): karta dědí 16 px jako
   zbytek dialogu a text v ní je 15 px. Na kartě samotné by 15 px zdědily i pilulky a čísla,
   které mají vlastní velikost jinou. */
.mck .dlg-karta p,
.mck .dlg-karta li { font-size: 15px; line-height: 1.65; color: var(--brown-700); }
.mck .dlg-karta p { margin: 0 0 9px; }

/* Kroky k reprodukci uvnitř karty (návrh `.steps`). */
.mck .dlg-kroky { margin: 0; padding-left: 23px; font-size: 15px; line-height: 1.65; }
.mck .dlg-kroky li { margin-bottom: 6px; }
.mck .dlg-kroky li:last-child { margin-bottom: 0; }

/* Věta pod kartou („Do tiketu se zapíšou jen potvrzená kritéria…"). */
.mck .dlg-uvod-pod-kartou { margin-top: 10px; }

/* ── AKCEPTAČNÍ KRITÉRIA K ODŠKRTNUTÍ (návrh `.acx`) ──────────────────────────────────────
   Řádky v jedné kartě, oddělené vlasovou linkou; NE samostatné kartičky pod sebou. Řádek
   je mřížka fajfka / text / křížek, aby druhý řádek dlouhého kritéria začínal pod textem. */
.mck .dlg-kriteria { margin-bottom: var(--space-3); }
.mck .dlg-kriteria-seznam { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.mck .dlg-karta .dlg-kriterium {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 11px;
    align-items: start;
    padding: 9px 0;
    border-bottom: 1px solid var(--cream-200);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--brown-700);
}

.mck .dlg-karta .dlg-kriterium:last-child { border-bottom: 0; }

/* Křížek „zahodit kritérium" je v kartě větší než jinde (návrh `.acx .rm`): stojí v řádku
   se dvěma dalšími ovládacími prvky a musí být zaměřitelný. */
.mck .dlg-karta .dlg-x {
    padding: 0 3px;
    font-size: 19px;
    line-height: 1;
    color: var(--brown-300);
}

.mck .dlg-karta .dlg-x:hover { color: var(--brown-700); }

/* NEPOTVRZENÉ JE PŘEŠKRTNUTÉ (návrh `.acx.off`) — do tiketu nepůjde, a to musí být vidět
   na první pohled, ne až z počitadla nad kartou. */
.mck .dlg-karta .dlg-kriterium.je-vypnute > span { opacity: .42; text-decoration: line-through; }

/* Čtvereček je TLAČÍTKO, ne nativní zaškrtávátko: návrh chce zelenou výplň s fajfkou a nativní
   prvek se nechat ve výchozí podobě nesmí (pokyn uživatele 14. 8. 2026). */
.mck .dlg-fajfka {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background: var(--white);
    color: transparent;
    font-size: 0;
    cursor: pointer;
}

.mck .dlg-fajfka.je-zapnuta {
    border-color: var(--green-500);
    background: var(--green-500);
    color: var(--brown-700);
    font-size: 13px;
    font-weight: var(--fw-bold);
}

/* Kritéria v RUČNÍM formuláři zůstávají kartičkami se zaškrtávátkem — tam nejde o přebírání
   cizího návrhu, ale o vlastní seznam. */
.mck .dlg-kriteria-seznam .dlg-kriterium {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 12.5px;
}

.mck .dlg-kriterium label { display: flex; align-items: flex-start; gap: 8px; flex: 1; cursor: pointer; }
.mck .dlg-kriteria-seznam .dlg-kriterium.je-potvrzeno { background: color-mix(in srgb, var(--green-500) 8%, var(--white)); }

/* ── PODOBNÝ TIKET V PANELU (návrh `.dupw`) ───────────────────────────────────────────────── */
.mck .dlg-duplikat {
    margin-bottom: 9px;
    padding: 11px 13px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--white);
}

.mck .dlg-duplikat-hlava { display: flex; align-items: center; gap: 9px; }
.mck .dlg-duplikat-nazev { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--brown-500); }
.mck .dlg-duplikat-tlac { height: 31px; margin-top: 9px; font-size: var(--text-xs); }
.mck .dlg-duplikat-navazano { display: inline-block; margin-top: 9px; font-size: var(--text-xs); font-weight: 600; color: var(--brown-400); }


/* --- Štítek a křížek „odebrat" (15. 8. 2026) ---------------------------------------------
   Sem se přestěhovaly z backoffice-mock.css (17. 8. 2026): patří ke slovníku dialogu —
   štítky se zadávají v zakládacím dialogu a ukazují i mění v detailu tiketu. Nechat je
   jinde by znamenalo hledat podobu dialogu na dvou místech. */
.mck .dlg-stitek {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 4px 0 9px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--brown-700);
    font-size: 11.5px;
    font-weight: var(--fw-medium);
}

.mck .dlg-x {
    border: 0;
    background: transparent;
    color: var(--brown-400);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

.mck .dlg-x:hover { color: var(--danger); }


/* ── ÚZKÝ DIALOG (zakládání rodiny, 17. 8. 2026) ──────────────────────────────────────────
   Zakládací dialog tiketu je široký, protože se v něm PÍŠE (popis, kritéria, přílohy).
   Rodina má jedno pole a dvě zaškrtnutí — ve stejné šířce by formulář plaval v prázdnu
   a oko by nevědělo, kde začít. Šířka je proto vlastnost KONKRÉTNÍHO dialogu, ne dialogu
   obecně; společná zůstává podoba (rám, hlavička, patička, hlášky). */
.mck .dlg.je-uzky { width: min(520px, 94vw); }

/* Tělo úzkého dialogu je jeden sloupec — mřížka `1fr 320px` by druhý sloupec nechala prázdný. */
.mck .dlg-telo.je-jeden-sloupec { grid-template-columns: minmax(0, 1fr); }

/* Pole a zaškrtnutí pod sebou; popisek nad polem (v dialogu tiketu to dělá `.dlg-telo label`,
   tady se skládá z `.dlg-popisek` + prvku, protože k poli patří i hláška a nápověda). */
.mck .dlg-pole { display: flex; flex-direction: column; gap: 4px; }
.mck .dlg-pole .pole { width: 100%; }

/* POZOR NA SPECIFIČNOST — chyba viděná na snímku, ne v computed style (17. 8. 2026).
   O kus výš stojí `.mck .dlg-telo label { flex-direction: column }` (popisek NAD polem, tak to
   má formulář tiketu). Zaškrtnutí je ale taky `<label>` uvnitř `.dlg-telo`, takže se mu
   zaškrtávátko postavilo NAD text a vypadalo jako osamocený čtvereček bez popisku. Selektor
   proto nese `.dlg-telo label` navíc — samotné `.dlg-zaskrtnuti` má o jednu třídu míň a prohraje. */
.mck .dlg-telo label.dlg-zaskrtnuti {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    font-weight: var(--fw-regular);
    line-height: 1.45;
    color: var(--barva-text);
    cursor: pointer;
}

.mck .dlg-zaskrtnuti input { margin-top: 2px; flex: none; }
.mck .dlg-zaskrtnuti-popis { display: block; font-size: 11.5px; margin-top: 2px; }

/* ── DOPTÁNÍ UVNITŘ DIALOGU ───────────────────────────────────────────────────────────────
   Otázku „rodinu s tímhle jménem už spravuji, přesto založit?" NELZE položit Alfrédovou
   potvrzovací vrstvou: nativní <dialog> kreslí prohlížeč do TOP LAYER, který přebije
   jakýkoli z-index, takže by otázka skončila POD dialogem. Uživatel by čekal na potvrzení,
   které nevidí — a to vypadá jako zamrzlá aplikace (táž past jako s hláškou 16. 8. 2026).
   Ptáme se proto inline, u pole, kterého se to týká (CLAUDE.md: „kde na Alfréda není,
   tak inline v stránce u prvku, kterého se to týká"). */
.mck .dlg-doptani {
    margin: 0 var(--space-5) var(--space-2);
    padding: 10px 12px;
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--warning) 10%, var(--white));
    color: var(--brown-900);
    font-size: 12.5px;
    line-height: 1.45;
}

.mck .dlg-doptani-akce { display: flex; gap: var(--space-2); margin-top: 8px; }

/* ── ZÁPISOVÝ DIALOG SPISU (přecenění, vlastník, číslo, protistrana; ADR-0096) ────────────
   Tyhle dialogy nezakládají tiket ani rodinu — zapisují do rodinného spisu z karty položky.
   Podoba je táž a bydlí tady ze stejného důvodu jako zbytek listu: kreslí je ČTYŘI různé
   komponenty a scoped CSS jedné na druhou nedosáhne. */

/* Vysvětlující věta uvnitř dialogu (citace z dokumentu, „platí do", co se stane po uložení).
   `.spis-text` sem nepatří: je psaná na plnou šířku stránky (1 rem, 70 ch) a v dialogu by byla
   větší než údaje, o kterých mluví. */
.mck .dlg-veta {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--barva-text);
}

.mck .dlg-veta.text-tlumeny { color: var(--barva-text-tlumeny); }

/* Řádek „vyber dokument + přečti ho" — pole roste, tlačítko si bere svoje. */
.mck .dlg-radek { display: flex; gap: var(--space-2); align-items: center; }
.mck .dlg-radek > .pole { flex: 1 1 auto; min-width: 0; }

/* Dvě pole na řádek: hodnota + ke dni, metoda + zdroj. Pod mezí se to složí pod sebe —
   dva sloupce v úzkém dialogu znamenají pole širší než jeho popisek. */
.mck .dlg-mriz {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.mck .dlg-mriz > .dlg-cele { grid-column: 1 / -1; }

@media (max-width: 620px) {
    .mck .dlg-mriz { grid-template-columns: 1fr; }
}

/* PAST S `flex: 1` A SMĚREM RODIČE (CLAUDE.md, ADR-0063 §8) — vidět jen ze snímku.
   Obal `CisloPole`/`DatumPole` (`.zpole`) má `flex: 1`. Uvnitř `.dlg-telo label`, což je
   SVISLÝ flex, tedy neroste do šířky, ale do VÝŠKY: pole nabylo na 128 px a mezi „Hodnotou"
   a „Ke dni" zůstala díra přes půl dialogu. Sráží se to tady, protože `.zpole` patří cizí
   komponentě a scoped CSS na ni nedosáhne. */
.mck .dlg-telo .zpole { flex: none; }

/* DOPTÁNÍ A VÝTKA JSOU VĚTA, NE POPISEK (17. 8. 2026, vidět jen ze snímku).
   `.dlg-popisek` je kapitálky s prostrkáním a dědí se do všeho, co v něm visí — otázka
   „Myslíte: 1,234 nebo 1 234" se uvnitř dialogu vykreslila jako „MYSLÍTE: 1,234 NEBO 1 234"
   a prostrkání rozhodilo i čísla, mezi kterými si má člověk vybrat. Mimo dialog (karta,
   tabulka) vypadá otázka správně, takže se to pozná jedině tady. */
.mck .dlg-telo .zpole-volba,
.mck .dlg-telo .zpole-chyba {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

/* ── PODOBNÉ TIKETY V ZAKLÁDACÍM DIALOGU (mockup `dupw`, 20. 8. 2026) ─────────────────────
   Nápověda, ne varování: krémový podklad a tlumené písmo. Kdyby to bylo červené, člověk by
   to bral jako chybu formuláře a naučil se to přeskakovat. */
.mck .dlg-podobne {
    margin: var(--space-3) 0 0;
    padding: 10px 12px;
    background: var(--cream-50);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
}
.mck .dlg-podobne-stitek { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--brown-500); margin-bottom: 8px; }
.mck .dlg-podobny { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: var(--text-xs); }
.mck .dlg-podobny + .dlg-podobny { border-top: 1px solid var(--cream-200); }
.mck .dlg-podobny-cislo { font-weight: 700; color: var(--green-700); text-decoration: none; white-space: nowrap; }
.mck .dlg-podobny-cislo:hover { text-decoration: underline; }
/* Název ustoupí — číslo, stav a důvod se nesmí zalomit; z názvu stačí začátek. */
/* Pilulka stavu — vlastní, protože `backlog-stav` je scoped u tabulky (hlídka
   ScopedCssDosahTests). Barvy z týchž tokenů, aby stav mluvil všude stejně. */
.mck .dlg-podobny-stav { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--text-3xs); font-weight: 600; white-space: nowrap; background: var(--cream-200); color: var(--brown-500); }
/* BARVY ZE ČÍSELNÍKU `STAVY` — jeden zdroj (`--stav-bg`/`--stav-ink` v backoffice-mock.css,
   značka `je-stav-*`). Do 20. 8. 2026 tu byla vlastní kopie týchž hexů; kopie se nerozešly
   jen náhodou. */
.mck .dlg-podobny-stav[class*="je-stav-"] { background: var(--stav-bg); color: var(--stav-ink); }

.mck .dlg-podobny-nazev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--brown-700); }
/* PROČ se to nabízí: společná slova. Bez důvodu vypadá nápověda jako náhoda a nikdo jí nevěří. */
.mck .dlg-podobny-proc { font-size: var(--text-3xs); white-space: nowrap; }
.mck .dlg-podobny-navazano { font-size: var(--text-3xs); font-weight: 600; }

/* ── ALFRÉD ČTE ZADÁNÍ (20. 8. 2026): zbytek dialogu ustoupí ────────────────────────────
   Táž řeč jako u asistenta (`.asi-blok[inert]`): zašedne hlavička, zadání, přílohy
   i patička — barevný zůstává jen čtecí box s postavou. `pointer-events: none` drží
   i klikání; Esc dialog zavře dál (nativní chování, únik z čekání zůstává). */
.mck .dlg-tiket.je-cteni :is(.dlg-hlava, .ntr-vstup .ntr-zadani, .dlg-ai-prilohy, .dlg-pata) {
    opacity: .38;
    filter: grayscale(.75);
    pointer-events: none;
    transition: opacity 200ms ease, filter 200ms ease;
}