/* ---------------------------------------------------------------------------
   Karta klienta — podoba 1:1 s návrhem Pavla Müllera (ALF-21).
   Zdroj: podklady/claude-design/mockup-backoffice-2026-09-02, obrazovka
   „Karta klienta", náhled `nahledy/20-karta-prehled.png`.

   PROČ GLOBÁLNÍ LIST, a ne scoped CSS stránky: karta skládá CIZÍ komponenty
   (rozpad majetku, graf vývoje, pásma IPS, upravitelná hodnota) a scoped CSS
   na ně nedosáhne — týž důvod jako `dialog.css`, `upravitelna-hodnota.css`
   a `karta-sekce.css`.

   Prefix `kk-`. V komentářích je u každého bloku jméno třídy z návrhu, aby
   šlo dohledat, odkud které číslo je — návrh se bude vracet u dalších záložek.
   --------------------------------------------------------------------------- */

/* Vodorovný posuv celé karty (návrh `.dtlwrap` + `.c`): karta má pevné
   minimum 1121 px, protože levý sloupec 284 px a hero se pod tím rozsypou.
   Posouvá se OBAL, ne tělo — jinak by drobeček i záložky odjely z dohledu. */
.kk-obal { overflow-x: auto; padding-bottom: 7px; }

.kk-karta {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* Minimum je NIŽŠÍ než v návrhu (1121): návrh počítá s úzkou lištou 98 px, naše rozbalená
       má 214 — na notebooku 1366 px zbývalo na kartu 1082 a celá se posouvala do strany
       (vytkl uživatel 5. 9. 2026). Při 1060 se hero, pás čísel ani mřížka nerozsypou
       (změřeno: žádný prvek nepřetéká), jen odkaz „Časová osa" v hlavičce se nesmí zalomit. */
    min-width: 1060px;
}

/* Drobeček (návrh `.dnav`) — zelený čtvereček, „Klienti / <rodina> · <segment>". */
.kk-dnav {
    display: flex; align-items: center; gap: 9.5px;
    font-size: 14px; color: var(--brown-400);
    padding: 15px 21px 0;
    white-space: nowrap; overflow: hidden;
}
.kk-dnav .sq { width: 14px; height: 14px; border-radius: 3.5px; flex: 0 0 auto; background: var(--green-700); }
.kk-dnav a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.kk-dnav a:hover { text-decoration: underline; }
.kk-dnav .cur { color: var(--brown-700); font-weight: 600; }
.kk-dnav .sep { color: var(--brown-300); }

/* Hlavička se jménem a odznaky (návrh `.dtop`/`.dtoph`/`.dt`, bez spodní linky —
   tu kreslí až řádek záložek). */
.kk-top { padding: 9.5px 21px 12px; }
.kk-toph { display: flex; align-items: flex-start; justify-content: space-between; gap: 21px; }
.kk-toph > .kk-toph-jmeno { flex: 1 1 auto; min-width: 0; }
.kk-toph > .kk-toph-akce { flex: 0 0 auto; padding-top: 6px; }
.kk-nazev {
    font-family: var(--font-body);
    font-size: 26px; font-weight: 700; color: var(--brown-700);
    line-height: 1.28; margin: 4px 0 0; letter-spacing: -.015em;
    text-wrap: pretty;
}
.kk-odznaky { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 11px; }
.kk-bal {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4.5px 13px; border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 600; white-space: nowrap;
    background: var(--cream-200); color: var(--brown-600);
}
.kk-bal.je-vytka { background: #f6e2dc; color: #c0472e; }
.kk-bal.je-dobra { background: var(--green-100); color: #5f6d05; }
.kk-bal.je-vlazna { background: #f8edd8; color: #a8741a; }

/* Řádek záložek (návrh `.ktabsrow`/`.ktabs`/`.kacts`). Zúžené záložky se
   posouvají vodorovně samy, aby akce vpravo zůstaly na místě. */
.kk-zalozky-radek {
    display: flex; align-items: center; gap: 14px;
    padding-right: 19px;
    border-bottom: 1px solid var(--border-hairline);
}
.kk-zalozky { display: flex; gap: 2px; padding: 0 21px; flex: 1; min-width: 0; overflow-x: auto; }
.kk-zalozky a, .kk-zalozky span.kk-zalozka {
    border: 0; background: transparent;
    font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
    color: var(--brown-400);
    padding: 12px 14px 13px;
    /* Řádkování se říká JMENOVITĚ: back office dědí 1,45 z `.mck`, kdežto návrh má na
       tlačítku `normal`. Bez toho je řádek záložek o 4 px vyšší než v návrhu. */
    line-height: 1.2;
    white-space: nowrap; text-decoration: none;
    border-bottom: 2.5px solid transparent;
}
.kk-zalozky a:hover { color: var(--brown-700); }
.kk-zalozky .je-aktivni { color: var(--brown-700); border-bottom-color: var(--green-500); }
/* Záložka, která ještě není hotová — táž zesedlost jako v levé liště
   (`.je-zasedla`): kurzor se nemění a nikam nevede. */
.kk-zalozky .je-zasedla { color: color-mix(in srgb, var(--brown-400) 55%, transparent); cursor: default; }
.kk-zalozky .n { font-family: var(--font-cisla); font-size: 12px; font-weight: 700; color: var(--brown-300); margin-left: 7px; }
.kk-zalozky .je-zasedla .n { color: color-mix(in srgb, var(--brown-300) 55%, transparent); }

.kk-akce { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; position: relative; padding-bottom: 1px; }

/* Nabídka pod „+" (návrh `.kmenu`). Sdílí podobu s nabídkou „···" v ticketingu
   (`bo-dalsi-menu`), tady se jen posadí pod tlačítko a dostane šířku pro delší popisky. */
.mck .kk-menu { min-width: 236px; right: 0; left: auto; }
.mck .kk-menu-cara { height: 1px; background: var(--cream-200); margin: 5px 2px; }
/* Položka, kterou zatím nevedeme — vidět zůstává, ale nikam nevede a kurzor to neslibuje
   (týž stav jako zesedlá záložka). */
.mck .kk-menu .bo-dalsi-polozka.je-zasedla {
    color: color-mix(in srgb, var(--brown-500) 50%, transparent);
    cursor: default;
}
.mck .kk-menu .bo-dalsi-polozka.je-zasedla:hover { background: transparent; }
.mck .kk-menu a.bo-dalsi-polozka { text-decoration: none; display: block; }

/* Tělo: levý informační sloupec 284 px + hlavní plocha (návrh `.kbody`). */
.kk-telo { display: grid; grid-template-columns: 284px minmax(0, 1fr); align-items: start; }
.kk-levy {
    padding: 18px 19px 26px;
    background: var(--cream-50);
    border-right: 1px solid var(--border-hairline);
    align-self: stretch;
    display: flex; flex-direction: column; gap: 19px;
}
.kk-hlavni { padding: 19px 21px 28px; min-width: 0; }

/* Nadpis skupiny v levém sloupci (návrh `.kirg`). */
.kk-skupina {
    font-size: 11.5px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--brown-300);
    margin-bottom: 10px;
}

/* Fotka hlavy rodiny (návrh `.kph`/`.kphc`). Výřez je posunutý nahoru
   (`center 22%`), aby portrét nebyl uříznutý v obličeji. */
.kk-foto {
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--cream-200); aspect-ratio: 1 / 1;
    background-size: cover; background-position: center 22%;
}
/* PRÁZDNÝ RÁMEČEK, když člen fotku nemá. Přerušovaná linka říká „sem něco patří" —
   plná by vypadala jako obrázek, který se nenačetl. */
.kk-foto.je-prazdna {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    position: relative;
    background: var(--cream-50);
    border: 1px dashed var(--border-hairline);
    color: var(--brown-400);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.kk-foto.je-prazdna:hover { border-color: var(--green-500); color: var(--green-700); }
.kk-foto.je-prazdna svg {
    width: 26px; height: 26px;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
/* Bez práva zápisu je to jen rámeček — kurzor se nemění a hover nesvítí, aby nesliboval akci. */
.kk-foto.je-bez-akce { cursor: default; }
.kk-foto.je-bez-akce:hover { border-color: var(--border-hairline); color: var(--brown-400); }
.kk-foto.je-zaneprazdnena { opacity: .6; cursor: progress; }

/* Souborový vstup si prohlížeč kreslí sám a text bere ze SVÉHO jazyka („Choose File"),
   přeložit ho nejde — proto je průhledný přes celou plochu a vidět je náš popisek
   (týž obrat jako u nahrávání papíru, `spis-soubor-*`). */
.kk-foto-vstup {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
/* VÝMĚNA NAHRANÉ FOTKY: celá fotka je klikací plocha, překryv se ukáže při najetí
   a při zaostření z klávesnice (`:focus-within` — souborový vstup je průhledný, takže
   bez toho by kurzor klávesnice na fotce nebyl vidět vůbec). */
.kk-foto.je-vymenitelna { position: relative; cursor: pointer; display: block; }
.kk-foto-prekryv {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    background: color-mix(in srgb, var(--brown-900) 62%, transparent);
    color: var(--cream-100);
    font-size: 13px; font-weight: 600; text-align: center;
    border-radius: var(--radius-md);
    opacity: 0;
    transition: opacity .14s cubic-bezier(.4, 0, .2, 1);
}
.kk-foto.je-vymenitelna:hover .kk-foto-prekryv,
.kk-foto.je-vymenitelna:focus-within .kk-foto-prekryv { opacity: 1; }
.kk-foto-prekryv svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
/* Zaneprázdněná fotka drží překryv vidět — jinak by při nahrávání nebylo poznat, že se
   něco děje, a člověk by klikal podruhé. */
.kk-foto.je-vymenitelna.je-zaneprazdnena .kk-foto-prekryv { opacity: 1; }
.kk-foto.je-vymenitelna.je-zaneprazdnena { cursor: progress; }

/* Odebrání je jediná destruktivní akce na kartě — tichý odkaz, ne tlačítko: nemá si říkat
   o pozornost víc než výměna, která je ta obvyklá. */
.kk-foto-blok { display: block; }
.kk-foto-odebrat {
    margin: 6px 0 0;
    opacity: 0;
    transition: opacity .14s cubic-bezier(.4, 0, .2, 1);
    border: 0; background: transparent; padding: 0;
    font: 500 13px var(--font-body);
    color: var(--brown-400);
    cursor: pointer;
}
.kk-foto-blok:hover .kk-foto-odebrat,
.kk-foto-odebrat:focus-visible { opacity: 1; }
.kk-foto-odebrat:hover { color: #c0472e; text-decoration: underline; }
.kk-foto-odebrat:disabled { opacity: .5; cursor: default; text-decoration: none; }

.kk-foto-chyba { margin: 8px 0 0; font-size: 13px; color: #c0472e; line-height: 1.45; }

.kk-foto-popis { font-size: 13px; color: var(--brown-500); margin-top: 9px; line-height: 1.45; }
.kk-foto-popis b { display: block; font-size: 14.5px; font-weight: 600; color: var(--brown-700); margin-bottom: 2px; }

/* Řádek kontaktu s ikonou (návrh `.kcr`). */
.kk-kontakt {
    display: grid; grid-template-columns: 17px 1fr; gap: 10px; align-items: start;
    color: var(--brown-600); line-height: 1.5; font-size: 14px; padding: 4px 0;
}
.kk-kontakt svg {
    width: 16px; height: 16px; margin-top: 3px;
    stroke: var(--brown-300); fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.kk-kontakt b { color: var(--brown-700); font-weight: 600; }
.kk-kontakt a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.kk-kontakt a:hover { text-decoration: underline; }

/* Vlastník vztahu — avatar + dvě řádky. */
.kk-vlastnik { display: flex; align-items: center; gap: 10px; }
.kk-vlastnik .kk-jm { display: block; font-size: 14px; font-weight: 600; color: var(--brown-700); }
.kk-vlastnik .kk-role { display: block; font-size: 12.5px; color: var(--brown-400); margin-top: 2px; }
.kk-ava {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--cream-200); color: var(--brown-600);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex: 0 0 auto;
    background-size: cover; background-position: center;
}

/* „Za koho spravujeme" — řádek entity (návrh `.entr`). */
.kk-entita {
    display: block; width: 100%; text-align: left;
    border: 0; border-bottom: 1px solid var(--cream-200);
    background: transparent; padding: 9px 0 10px;
    font-family: var(--font-body); text-decoration: none;
}
.kk-entita:last-of-type { border-bottom: 0; }
.kk-entita .ty { display: block; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--brown-300); }
.kk-entita .nm { display: block; font-size: 13.5px; font-weight: 600; color: var(--brown-700); line-height: 1.35; margin-top: 3px; }
.kk-entita:hover .nm { color: var(--green-700); }
.kk-entita .rw { display: flex; align-items: baseline; gap: 10px; margin-top: 3px; }
.kk-entita .sb { flex: 1; font-size: 12.5px; color: var(--brown-400); line-height: 1.35; min-width: 0; }
.kk-entita .am { font-family: var(--font-cisla); font-size: 12.5px; font-weight: 700; color: var(--brown-500); white-space: nowrap; }

.kk-stitky { display: flex; flex-wrap: wrap; gap: 6px; }
.kk-stitek {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9.5px;
    border-radius: var(--radius-pill); background: var(--cream-100);
    border: 1px solid var(--border-hairline);
    font-size: 12px; font-weight: 600; color: var(--brown-500); white-space: nowrap;
}

/* Prázdný stav v levém sloupci i v kartách — věta, ne rámeček. */
.kk-nic { font-size: 13.5px; color: var(--brown-400); line-height: 1.5; }

/* ---- karty v hlavní ploše (návrh `.kc2`/`.kc2h`/`.kc2b`) ---- */
.kk-c {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}
.kk-c:last-child { margin-bottom: 0; }
.kk-ch {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px 12px;
    border-bottom: 1px solid var(--cream-200);
}
.kk-ch .l { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brown-400); white-space: nowrap; }
.kk-ch .n { font-family: var(--font-cisla); font-size: 12px; font-weight: 700; color: var(--brown-300); white-space: nowrap; margin-left: auto; }
.kk-ch .kk-mezera { flex: 1; }
.kk-cb { padding: 6px 18px 8px; }

/* Dvousloupcová mříž pod hero (návrh `.kgrid`; poměr 1,45 : 1 platí jen tam,
   kde je vlevo obsah s tabulkou — u dvou stejně vážných karet se v návrhu
   předepisuje `repeat(2, …)` inline). */
.kk-mriz { display: grid; grid-template-columns: 1.45fr 1fr; gap: 19px; align-items: start; }
.kk-mriz.je-napul { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.kk-mriz.je-napul > .kk-c { margin-bottom: 0; display: flex; flex-direction: column; height: 100%; }
.kk-mriz.je-napul > .kk-c > .kk-cb { flex: 1; }

/* ---- hero: čisté jmění + donut + sparkline (návrh `.hero`) ---- */
.kk-hero {
    display: grid;
    grid-template-columns: minmax(190px, .8fr) auto minmax(220px, 1.1fr);
    gap: 24px; padding: 18px 18px 20px; align-items: center;
}
.kk-hero .cap { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brown-400); }
.kk-hero .big {
    font-family: var(--font-cisla); font-size: 40px; font-weight: 700;
    color: var(--brown-700); letter-spacing: -.025em; line-height: 1; margin-top: 8px;
}
.kk-hero .sub { font-size: 13.5px; color: var(--brown-400); margin-top: 9px; }
.kk-hero-donut { display: flex; flex-direction: column; align-items: center; gap: 11px; min-width: 0; }

/* Donut v záhlaví (návrh `.dnt`) — 136 px, bez legendy a bez textu ve středu. Legendu
   nahrazuje pás čísel pod ním a `<title>` u každé výseče; kdo chce rozpad podrobně, jde
   na záložku Majetek. Barvu dává třída kategorie z `kategorie.css`, ne pořadí v grafu. */
.kk-donut { position: relative; width: 136px; height: 136px; flex: 0 0 auto; }
.kk-donut svg { width: 136px; height: 136px; display: block; }
/* PRSTENEC SE KRESLÍ TAHEM, ne výplní: `DonutGraf` vrací OBLOUK STŘEDNICE (poloměr 42,8
   ve viewBoxu 0–100) a tloušťka se přičítá na obě strany. Bez `fill: none` je z každé
   výseče plný koláčový klín — přesně tak vypadal donut při prvním průchodu.
   Tloušťka 14,4 je táž jako v klientské tváři: jeden donut na dvou místech aplikace. */
.kk-donut svg path {
    fill: none;
    stroke-width: 14.4;
    stroke-linecap: butt;
}
/* POZOR: `stroke` tady BÝT NESMÍ. Barvu výseče nese prezentační atribut `stroke` v markupu
   (jedna barva na kategorii, `MajetekPaleta.Barva`) a jakékoli pravidlo v listu ho přebije —
   prstenec pak vyjde celý v jedné barvě. Stalo se to hned při druhém průchodu. */

/* Malý graf (návrh `.spk`): plocha pod křivkou a čára nad ní, popisky jen na krajích osy. */
.kk-spark { position: relative; min-width: 0; height: 136px; }
.kk-spark > svg { width: 100%; height: 112px; display: block; overflow: visible; }
.kk-spark-plocha { fill: var(--green-100); }
.kk-spark-linka { fill: none; stroke: var(--green-700); stroke-width: 2; stroke-linejoin: round; }
.kk-spark-osa {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--brown-400); margin-top: 2px;
}
/* Věta místo grafu (málo ocenění) i věta pod grafem (křivka není čisté jmění). */
.kk-spark-poznamka { font-size: 13px; color: var(--brown-400); line-height: 1.45; margin-top: 4px; }

/* Tři čísla pod hero (návrh `.kmini`). */
.kk-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cream-200); }
.kk-mini > div { padding: 13px 18px; }
.kk-mini > div + div { border-left: 1px solid var(--cream-200); }
.kk-mini .l { font-size: 12px; color: var(--brown-400); }
.kk-mini .v { font-family: var(--font-cisla); font-size: 18px; font-weight: 700; color: var(--brown-700); margin-top: 5px; line-height: 1; }

/* ---- pásma IPS (návrh `.ipsr` + `.trk` + `.drf`) ---- */
.kk-pasmo {
    display: grid; grid-template-columns: minmax(80px, 96px) minmax(0, 1fr) 74px;
    gap: 12px; align-items: center;
    padding: 9px 0; border-bottom: 1px solid var(--cream-200);
}
.kk-pasmo:last-of-type { border-bottom: 0; }
.kk-pasmo .nm { font-size: 13.5px; font-weight: 600; color: var(--brown-700); line-height: 1.3; }
.kk-trat { position: relative; height: 22px; border-radius: var(--radius-sm); background: var(--cream-200); overflow: hidden; }
.kk-trat .zn { position: absolute; top: 0; bottom: 0; background: var(--green-200); }
.kk-trat .tg { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--green-700); }
.kk-trat .cr { position: absolute; top: -2px; bottom: -2px; width: 3px; border-radius: 2px; background: var(--brown-700); }
.kk-trat .cr.je-mimo { background: #c0472e; }
.kk-odchylka { text-align: right; line-height: 1.2; }
.kk-odchylka b { font-family: var(--font-cisla); font-size: 13px; font-weight: 700; }
.kk-odchylka .st { display: block; font-size: 11px; color: var(--brown-400); margin-top: 3px; }
.kk-odchylka b { color: var(--brown-700); }
.kk-odchylka b.je-mimo { color: #c0472e; }

/* ---- dvojice „nejbližší / poslední" (návrh `.pair`) ---- */
.kk-par {
    display: grid; grid-template-columns: 20px 1fr; gap: 11px;
    padding: 12px 0; border-bottom: 1px solid var(--cream-200); align-items: start;
}
.kk-par:last-of-type, .kk-par.je-posledni { border-bottom: 0; }
.kk-par svg { width: 17px; height: 17px; margin-top: 2px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kk-par .hl { display: block; font-size: 13.5px; font-weight: 700; color: var(--brown-600); }
.kk-par .ln { display: block; font-size: 14px; color: var(--brown-700); margin-top: 4px; line-height: 1.4; }
.kk-par .wh { display: block; font-size: 12.5px; color: var(--brown-400); margin-top: 3px; }

/* ---- Alfrédova karta (návrh `.aic`/`.aich`/`.aist`/`.aii`) ---- */
.kk-ai { border: 1px solid #dfe4bd; border-radius: var(--radius-md); background: #fbfcf2; }
.kk-aih { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid #e8ebd4; }
.kk-aih .sp { width: 18px; height: 18px; stroke: var(--green-700); fill: none; stroke-width: 1.7; flex: 0 0 auto; }
.kk-aih .t { font-size: 14px; font-weight: 700; color: var(--brown-700); }
.kk-aih .eb { font-size: 11.5px; color: var(--brown-400); font-family: var(--font-cisla); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-aih .kk-mezera { flex: 1; }
.kk-ai-krok { padding: 13px 16px; background: #f6f8e6; }
.kk-ai-krok .k { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); }
.kk-ai-krok .t { font-size: 14.5px; font-weight: 700; color: var(--brown-700); margin-top: 6px; line-height: 1.4; }
.kk-ai-radek { padding: 13px 16px; border-bottom: 1px solid #e8ebd4; }
.kk-ai-radek:last-child { border-bottom: 0; }
.kk-ai-radek .t { font-size: 14px; font-weight: 500; color: var(--brown-600); line-height: 1.5; text-wrap: pretty; }
.kk-ai-radek .kk-odkaz {
    white-space: nowrap; margin-top: 8px; padding: 0; display: inline-block; }

/* ---- manažerské shrnutí (návrh `.msum`/`.mtxt`/`.mfacts`/`.mf`) ---- */
.kk-shrnuti { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 0; align-items: stretch; }
.kk-shrnuti-text { padding: 15px 18px 17px; }
.kk-shrnuti-text p { margin: 0 0 11px; font-size: 14.5px; line-height: 1.6; color: var(--brown-600); text-wrap: pretty; }
.kk-shrnuti-text p:last-child { margin-bottom: 0; }
.kk-fakta { display: flex; flex-direction: column; background: #f6f8e6; border-left: 1px solid #e8ebd4; padding: 9px 18px 11px; }
.kk-fakt {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px;
    padding: 7px 0; border-bottom: 1px solid #e8ebd4;
    font-size: 13.5px; align-items: baseline;
}
.kk-fakt:last-child { border-bottom: 0; }
.kk-fakt .k { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--green-700); line-height: 1.35; }
.kk-fakt .v { color: var(--brown-700); line-height: 1.45; text-wrap: pretty; }

/* ---- propojení na jiné klienty (návrh `.pgrp`/`.plnk`) ---- */
.kk-vazby-skupina { padding: 11px 0 3px; border-bottom: 1px solid var(--cream-200); }
.kk-vazby-skupina:last-child { border-bottom: 0; }
.kk-vazby-skupina .gh { font-size: 12.5px; font-weight: 600; color: var(--brown-400); }
.kk-vazby-skupina .gh b { color: var(--brown-500); font-family: var(--font-cisla); }
.kk-vazba { display: block; padding: 7px 0 8px; text-align: left; text-decoration: none; width: 100%; }
.kk-vazba .nm { display: block; font-size: 14.5px; font-weight: 600; color: var(--green-700); line-height: 1.35; }
.kk-vazba .rl { display: block; font-size: 12.5px; color: var(--brown-400); margin-top: 2px; line-height: 1.4; }
.kk-vazba:hover .nm { color: var(--brown-700); }

/* Odkaz v hlavičce karty (návrh `.lnk`). */
.kk-odkaz {
    font-size: 14px; font-weight: 600; color: var(--green-700);
    background: transparent; border: 0; padding: 0;
    font-family: var(--font-body); text-decoration: none; cursor: pointer;
}
.kk-odkaz:hover { text-decoration: underline; }
/* Odkaz na část, která ještě není v provozu — týž stav jako zesedlá záložka: je vidět,
   že tam patří, ale nikam nevede a kurzor to neslibuje. */
.kk-odkaz.je-zasedly {
    color: color-mix(in srgb, var(--brown-400) 55%, transparent);
    cursor: default;
}
.kk-odkaz.je-zasedly:hover { text-decoration: none; }

/* Prázdná plocha záložky, která ještě nemá obsah (návrh `.kempty`). */
.kk-prazdno {
    padding: 26px 22px;
    border: 1px dashed var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--cream-50);
    font-size: 14px; color: var(--brown-400); line-height: 1.6;
    text-wrap: pretty; max-width: 620px;
}


/* ---- časová osa (návrh: dvě sekce, řádek datum · druh · co) --------------- */

.mck .kk-osa-radek {
    display: grid;
    grid-template-columns: 116px 116px minmax(0, 1fr);
    gap: 14px; align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--cream-200);
}
.mck .kk-osa-radek:last-child { border-bottom: 0; }
.mck .kk-osa-kdy .den {
    display: block;
    font-family: var(--font-cisla); font-weight: 700; font-size: 13px;
    color: var(--brown-700); white-space: nowrap;
}
/* Relativní čas pod datem: „za 3 dny" odpovídá na otázku, kterou datum nutí počítat. */
.mck .kk-osa-kdy .odstup { display: block; font-size: 12px; color: var(--brown-400); margin-top: 2px; }
/* Prošlý termín je VÝTKA, ne informace — proto barva varování, ne tlumená šedá. */
.mck .kk-osa-kdy .odstup.je-minule { color: var(--brown-400); }
.mck .kk-osa-druh {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brown-300); white-space: nowrap;
}
.mck .kk-osa-co .nazev { display: block; font-size: 14px; color: var(--brown-700); line-height: 1.4; }
.mck .kk-osa-co .popis { display: block; font-size: 13px; color: var(--brown-400); margin-top: 2px; }

/* ── Záložka Majetek (návrh `.ksech` + `.tb` + `mj.foot`) ───────────────────────────────── */
/* Hlavička: řádek segmentů vlevo, „+ Položka" vpravo (návrh `.ksech { gap: 12px; margin-bottom: 14px }`). */
.kk-majetek-hlava {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: nowrap;
    container-type: inline-size;
}
/* DESET PILULEK NA JEDNOM ŘÁDKU, BEZ POSUVNÍKU A BEZ ZALOMENÍ (pokyn uživatele 5. 9. 2026 —
   zalomení „je hnus", posuvník taky). V návrhové velikosti je řádek 1234 px a s rozbalenou
   lištou se nevejde ani na 1920, proto se ZHUŠŤUJE podle šířky hlavičky (container query),
   v tomhle pořadí: menší odsazení a písmo → z tlačítka zůstane jen „+" → počet zůstane jen
   u vybrané pilulky → ještě menší písmo. Prahy jsou ZMĚŘENÉ (obsah pilulek + tlačítko 102 px
   + mezera 12): 13/11 = 1348 · 12,5/9 = 1257 · 12/7 = 1192 · 11,5/6 = 1154 · jen „+" = 1091 ·
   bez počtů = 793 · 11/5 bez počtů = 742. Posuv (bez viditelné lišty) je až poslední záchrana
   pod tím — zúžené okno, telefon. */
.kk-majetek-hlava .dm-zalozky {
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.kk-majetek-hlava .dm-zalozky::-webkit-scrollbar { display: none; }
.kk-majetek-hlava .ikon-tl { flex: 0 0 auto; }

@container (max-width: 1347px) {
    .kk-majetek-hlava .dm-zalozky a { font-size: 12.5px; padding: 4px 9px; }
    .kk-majetek-hlava .dm-zalozky .n { font-size: 10.5px; margin-left: 4px; }
}
@container (max-width: 1256px) {
    .kk-majetek-hlava .dm-zalozky a { font-size: 12px; padding: 4px 7px; }
    .kk-majetek-hlava .dm-zalozky .n { margin-left: 3px; }
}
@container (max-width: 1191px) {
    .kk-majetek-hlava .dm-zalozky a { font-size: 11.5px; padding: 3px 6px; }
    .kk-majetek-hlava .dm-zalozky .n { font-size: 10px; }
}
@container (max-width: 1153px) {
    /* Z tlačítka zůstává „+" (nápis nese title) — 63 px, o které se pilulky vejdou i s počty. */
    .kk-majetek-hlava .kk-majetek-plus { width: 39px; padding: 0; }
    .kk-majetek-hlava .kk-majetek-plus-text { display: none; }
}
@container (max-width: 1090px) {
    /* Počet zůstává jen u vybrané pilulky — název je důležitější než číslo. */
    .kk-majetek-hlava .dm-zalozky a:not(.je-aktivni) .n { display: none; }
}
@container (max-width: 792px) {
    .kk-majetek-hlava .dm-zalozky a { font-size: 11px; padding: 3px 5px; }
}
}
.kk-mezera { flex: 1 1 auto; }

/* Tabulka je hustá `.tabulka` (ADR-0049); rám a zaoblení karty z návrhu `.c`. */
/* Tabulka se v rámu POSOUVÁ (`overflow-x: auto`, návrh má uvnitř `.c` div s `overflow-x:auto`).
   Se skrytým přetokem by na užší obrazovce (1366 s rozbalenou lištou) zmizely pravé sloupce
   BEZE STOPY — ořez vypadá jako tabulka, která ty sloupce nemá (změřeno 5. 9. 2026). */
.kk-majetek-tabulka {
    background: var(--white); border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow-x: auto;
}
.kk-majetek-tabulka .tabulka { width: 100%; }
.kk-majetek-tabulka .sl-kategorie { width: 160px; }
.kk-majetek-tabulka .sl-entita { width: 210px; max-width: 210px; }
.kk-majetek-tabulka td.sl-entita.je-tlumeny { color: var(--brown-300); }
.kk-majetek-tabulka .sl-mena { width: 86px; }
.kk-majetek-tabulka .sl-oceneni { width: 146px; }
.kk-majetek-tabulka .sl-termin { width: 130px; }
.kk-majetek-tabulka .sl-kvartal { width: 112px; }
.kk-majetek-tabulka .sl-kontext { width: 230px; max-width: 230px; }
.kk-majetek-tabulka .sl-jistota { width: 150px; color: var(--brown-400); }
.kk-majetek-tabulka td.sl-cislo.je-odtok { color: var(--brown-400); }
.kk-majetek-tabulka tr.je-budouci td { background: var(--cream-50); }
.kk-majetek-tabulka th.sl-cislo { text-align: right; }
.kk-majetek-odkaz { color: inherit; text-decoration: none; }
.kk-majetek-odkaz:hover { color: var(--green-700); }
/* Pilulka kategorie v buňce husté tabulky je nižší než odznak v záhlaví karty. */
.kk-majetek-tabulka .kk-bal { padding: 2px 10px; font-size: 12px; }

/* Patička (návrh `mj.foot`: popisek šedě, číslo tučně číslicovým řezem, druhé číslo tlumené). */
.kk-majetek-pata {
    display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap;
    padding: 12px 4px 0; font-size: 13.5px; color: var(--brown-400);
}
.kk-majetek-pata .v { font: 700 14px var(--font-cisla); color: var(--brown-700); margin-right: 8px; }
.kk-majetek-pata .v.je-tlumeny { color: var(--brown-400); }
.kk-majetek-prazdno {
    padding: 22px 18px; font-size: 14px; color: var(--brown-400); line-height: 1.6;
    background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
    max-width: 86ch;
}

/* ── ZÁLOŽKA CÍLE A PLÁN ─────────────────────────────────────────────────────────────────
   Podoba je tady, v GLOBÁLNÍM listu karty, ne ve scoped CSS komponenty: záložka skládá
   tabulky (`.tabulka`) a pilulky, na které scoped pravidlo komponenty nedosáhne — týž důvod
   jako u `dialog.css` a `upravitelna-hodnota.css`. */

/* Rámec plánu: hustá mřížka popisek/hodnota, ne karta na každý údaj — je to pět čísel,
   která se čtou najednou. */
.kk-plan-ramec {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    padding: 2px 0 6px;
}
.kk-plan-ramec > div { min-width: 96px; }
.kk-plan-ramec dt {
    margin: 0;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brown-400);
}
.kk-plan-ramec dd {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--brown-800);
}

.kk-plan-poznamka {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--brown-600);
}

/* Čtyři čísla cíle vedle sebe; pod 720 px se zalomí na dvě řady. */
.kk-plan-kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 20px;
    padding: 2px 0 8px;
}
@media (max-width: 720px) {
    .kk-plan-kpi { grid-template-columns: repeat(2, 1fr); }
}
.kk-plan-kpi dt {
    margin: 0;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brown-400);
}
.kk-plan-kpi dd {
    margin: 3px 0 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--brown-800);
    font-variant-numeric: tabular-nums;
}
.kk-plan-kpi .pod {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--brown-400);
}

.kk-plan-veta {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--brown-700);
}

/* Výtka NENÍ chyba aplikace — je to věta o podkladech, kterou musí poradce vidět dřív,
   než číslo někam napíše. Proto vlevo výrazná linka, ne červené pole. */
.kk-plan-vytka {
    margin: 8px 0 0;
    padding: 7px 10px;
    border-left: 3px solid #c8871f;
    background: color-mix(in srgb, #c8871f 7%, transparent);
    font-size: 13px;
    line-height: 1.5;
    color: var(--brown-700);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Křivka plánu. Plátno má `preserveAspectRatio="none"`, takže se čára musí kreslit
   s `vector-effect="non-scaling-stroke"` — jinak je vlevo tenčí než vpravo. */
.kk-plan-graf { padding: 4px 0 0; }
.kk-plan-graf-radek { display: flex; align-items: stretch; gap: 8px; }

/* Svislá osa je SOUROZENEC plátna (viz komentář v komponentě). Popisky visí na hodnotě
   mřížky, takže se posouvají s ní. */
.kk-plan-osa-y {
    position: relative;
    flex: none;
    width: 52px;
    height: 220px;
    font-size: 11px;
    color: var(--brown-400);
}
.kk-plan-osa-y span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    white-space: nowrap;
}
.kk-plan-platno { position: relative; flex: 1; min-width: 0; }
.kk-plan-graf svg {
    display: block;
    width: 100%;
    height: 220px;
}

/* Značka začátku čerpání: svislá čára přes plátno a štítek u horního okraje. */
.kk-plan-renta {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed color-mix(in srgb, var(--brown-800) 34%, transparent);
    pointer-events: none;
}
.kk-plan-renta .stitek {
    position: absolute;
    top: 2px;
    left: 5px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--cream-100, #fbf8f2);
    border: 1px solid var(--cream-200);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--brown-600);
    white-space: nowrap;
}
.kk-plan-graf .mrizka {
    stroke: color-mix(in srgb, var(--brown-800) 10%, transparent);
    stroke-width: 1;
}
.kk-plan-graf .plocha { fill: color-mix(in srgb, var(--green-600) 12%, transparent); }
.kk-plan-graf .krivka {
    fill: none;
    stroke: var(--green-600);
    stroke-width: 2;
    stroke-linejoin: round;
}
.kk-plan-osa {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 11px;
    color: var(--brown-400);
}

/* Odkaz na celý dokument plánu v hlavičce karty — tichý, vedle pilulky stavu. */
.kk-plan-odkaz {
    margin-right: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--barva-akcent-text, var(--brown-600));
    text-decoration: none;
}
.kk-plan-odkaz:hover { text-decoration: underline; }

/* ---- záložka Struktura (7. 9. 2026) — sekce s nadpisem NAD kartou (návrh `.ksec`/`.ksech`)
   a strom vazeb (návrh `.tree`/`.tnode`). Sekce se liší od `.kk-c` s hlavičkou uvnitř:
   nadpis stojí volně nad bílou kartou, jako v návrhu u tabulky entit. ---- */
.kk-sekce { margin-bottom: 23px; }
.kk-sekce:last-child { margin-bottom: 0; }
.kk-sekce-h { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.kk-sekce-h .t { font-size: 15px; font-weight: 700; color: var(--brown-700); letter-spacing: -.005em; }
.kk-sekce-h .sm { font-size: 13px; color: var(--brown-400); }
.kk-sekce .kk-c { margin-bottom: 0; }
.kk-c-pad { padding: 15px 17px; }
.kk-sekce-pozn { padding: 10px 18px 12px; }
.kk-tlumene { color: var(--brown-400); }

.kk-entita-nazev { display: block; font-weight: 600; color: var(--brown-700); }
.kk-entita-sub { display: block; font-size: 13px; color: var(--brown-400); margin-top: 2px; }

/* Strom vazeb: mřížka jméno · podíl · štítek, odsazení úrovně dává markup (24 px/úroveň,
   `KartaStruktura.OdsazeniUrovne`) — číslo je jedno a bydlí u toho, kdo úrovně počítá. */
.kk-strom { font-size: 14px; }
.kk-uzel {
    display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
    padding: 9px 0; border-bottom: 1px solid var(--cream-200);
}
.kk-uzel:last-child { border-bottom: none; }
.kk-uzel .nm { display: block; font-weight: 600; color: var(--brown-700); }
.kk-uzel .sb { display: block; font-size: 12.5px; color: var(--brown-400); margin-top: 3px; line-height: 1.4; }
.kk-uzel .pc { font-family: var(--font-cisla); font-weight: 700; font-size: 13px; color: var(--brown-500); white-space: nowrap; }

/* ---- záložka Rodina (7. 9. 2026) — členové po generacích (návrh `.gen`/`.genc`/`.genh`/
   `.stack`/`.mini`): sloupec na generaci, řádek = kolečko 34 px (`.kk-ava`, jako v návrhu
   inline 34×34) + jméno, role a pilulka. Popisek generace je `.kk-skupina` (týž řez jako `.genh`). */
/* SLOUPCE MAJÍ STEJNOU VÝŠKU (7. 9. 2026, vytkl uživatel): návrh má `align-items: start`, ale
   s reálnými daty (2 · 3 · 1 člen) dlaždice na sebe nenavazovaly a řádek vypadal roztrhaně. */
.kk-gen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.kk-gen.je-vic { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kk-genc {
    border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
    background: var(--white); padding: 13px 14px;
}
/* Popisek generace má v návrhu prostrkání .12em (`.genh`), levý sloupec .13em (`.kirg`). */
.kk-genc .kk-skupina { margin-bottom: 9px; letter-spacing: .12em; }
.kk-stack { display: flex; flex-direction: column; gap: 9px; }
.kk-clen { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; }
.kk-clen-jmeno { display: block; font-size: 14px; font-weight: 600; color: var(--brown-700); line-height: 1.3; }
.kk-clen-role { display: block; font-size: 12.5px; color: var(--brown-400); margin-top: 3px; line-height: 1.4; }
.kk-clen-pilulka { display: block; font-family: var(--font-cisla); font-weight: 600; font-size: 12.5px; color: var(--brown-500); margin-top: 6px; }
.kk-ava.je-foto { background-size: cover; background-position: center; color: transparent; }

/* Řádek „popisek · stav" (návrh `.prow`) — ústava jako dokument. */
.kk-prow {
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
    padding: 9px 0; border-bottom: 1px solid var(--cream-200); font-size: 14px;
}
.kk-prow:last-child { border-bottom: none; }

/* Rodokmen z klientské tváře na kartě: komponenta si nese vlastní podobu (`rodokmen-*`),
   tady jen dostane bílou kartu a nesmí ji přerůst. */
.kk-rodokmen .kk-c { overflow: hidden; }
/* DVOJICE ÚSTAVA · PŘEDÁNÍ: sekce uvnitř mřížky si nesmí nést vlastní spodní okraj — zvedal
   výšku řádku o 23 px a pod dvojicí vznikala dvojitá mezera (vytkl uživatel 7. 9. 2026).
   Karty se natahují na stejnou výšku, ať na sebe navazují. */
.kk-rodina-mriz { margin-bottom: 23px; align-items: stretch; }
.kk-rodina-mriz > .kk-sekce { margin-bottom: 0; display: flex; flex-direction: column; }
.kk-rodina-mriz > .kk-sekce > .kk-c { flex: 1 1 auto; }

/* Legenda a věta pod rodokmenem: v `majetek.css` jsou zavřené pod `.mjt` (klientská tvář),
   takže se na kartě kreslily jako holé odrážky. Tady TÁŽ pravidla se sépiovými tokeny back
   office; tečky nesou TÉŽ barvy generací jako kolečka na stromě — kdyby se rozešly, legenda
   by lhala (viz komentář v majetek.css). */
.kk-rodokmen .mjt-rk-jak { margin: 0 0 6px; text-align: center; font-size: 11px; color: var(--brown-400); }
.kk-rodokmen .mjt-rk-legenda {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
    font-size: 10.5px; color: var(--brown-400);
}
.kk-rodokmen .mjt-rk-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.kk-rodokmen .mjt-rk-tecka { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--gc, var(--brown-300)); }
.kk-rodokmen .mjt-rk-tecka.gen-0 { --gc: #8A5A2B; }
.kk-rodokmen .mjt-rk-tecka.gen-1 { --gc: #A6462E; }
.kk-rodokmen .mjt-rk-tecka.gen-2 { --gc: #AF7A1C; }
.kk-rodokmen .mjt-rk-tecka.gen-3 { --gc: #6E8B2A; }
.kk-rodokmen .mjt-rk-tecka.gen-4 { --gc: #2F7E7A; }
.kk-rodokmen .mjt-rk-tecka.gen-5 { --gc: #7A5EA6; }
.kk-rodokmen .mjt-rk-cara { width: 18px; height: 0; border-top: 2px solid var(--brown-500); display: inline-block; }
.kk-rodokmen .mjt-rk-cara.partner { border-top-style: dashed; }

/* NAHRÁNÍ FOTKY DO KROUŽKU RODOKMENU (7. 9. 2026, pokyn uživatele) — překryv přes kolečko,
   vidět při najetí a při zaostření z klávesnice; souborový vstup je průhledný přes celou
   plochu (`.kk-foto-vstup`), vidět je naše ikona. Jen v back office — klientská tvář překryv
   nedostane (statické SSR, ADR-0067), kroužek tam fotku jen ukazuje. */
.kk-strom-foto {
    position: absolute; inset: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--brown-900) 58%, transparent);
    color: var(--cream-100); cursor: pointer;
    opacity: 0; transition: opacity .15s ease; z-index: 3;
}
.rodokmen-clen:hover .kk-strom-foto,
.rodokmen-clen:focus-within .kk-strom-foto,
.kk-strom-foto.je-zaneprazdnena { opacity: 1; }
.kk-strom-foto.je-zaneprazdnena { cursor: progress; }
.kk-strom-foto svg { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kk-rodokmen .kk-foto-chyba { margin-top: 10px; }

/* RODINA BEZ HLAVY (8. 9. 2026): rámeček z návrhu s větou místo prázdna, pod ním inline výběr
   člena. Rámeček není klikací (fotka se nahrává až hlavě), proto `je-bez-akce`. */
.kk-foto-bez-hlavy span { font-size: 12.5px; }
.kk-hlava-vyber { display: block; margin-top: 8px; }
.kk-hlava-vyber .kk-nic { display: block; margin-bottom: 4px; }
.kk-hlava-vyber select.pole { width: 100%; }