/* ============================================================================================
   KARTA POLOŽKY, VARIANTA B (`ks-*`) — souhrnný pruh · skládací sekce · hustá mřížka.

   Podle schváleného návrhu `nahledy/navrh-detailu/` (varianta B, 17. 8. 2026): nahoře souhrnný
   pruh, pod ním sekce zavřené do JEDNOHO ŘÁDKU s náhledem obsahu, které se rozbalují na
   vyžádání. Hlavní stížnost k dnešní kartě byla „nejsou ani poznat sekce" — odpověď je krémový
   proužek s kapitálkami a VODOROVNOU zelenou čárkou. Svislý barevný pruh vlevo u karet je
   zakázaný vzor, hlavička je JEDEN řádek (30 px).

   ── PROČ GLOBÁLNÍ LIST A NE SCOPED CSS ─────────────────────────────────────────────────────
   Sekce OBALUJE cizí komponenty (složení portfolia, čísla a protistrany, historie ocenění,
   upravitelná hodnota) a její obsah se kreslí z jiných `.razor` souborů. Scoped list by na ně
   nedosáhl: Blazor přilepí ke každému pravidlu značku scope a dá ji jen prvkům z toho jednoho
   souboru. Přesně tak vylezl anglický souborový vstup na kartě majetku (14. 8. 2026). A kdo
   pravidla OPÍŠE, má dvě kopie, které se do měsíce rozejdou. Týž důvod jako u `dialog.css`
   (ADR-0092) a `upravitelna-hodnota.css` (ADR-0094). Hlídá `PodobaKartySekceTests`.

   Slovník tříd:
     .ks-karta      rám karty (bílá, vlasový rámeček) — hostitel pruhu a sekcí
     .ks-souhrn     souhrnný pruh nahoře; JEN KE ČTENÍ (viz níž)
     .ks-oko        kapitálkový popisek nad hodnotou
     .ks-cislo      hlavní číslo velkým písmem
     .ks-pod        věta pod hlavním číslem („doloženo ke dni …")
     .ks-stavy      sloupec pilulek
     .ks-bal        pilulka stavu (.je-ok · .je-pozor · .je-klid)
     .ks-sekce      skládací sekce (.je-otevrena)
     .ks-hlava      hlavička sekce — JEDEN řádek
     .ks-prepinac   klikací část hlavičky (šipka, čárka, název, náhled)
     .ks-sipka      ▶, otočí se o 90° po rozbalení
     .ks-tik        vodorovná zelená čárka
     .ks-titul      název sekce kapitálkami
     .ks-nahled     náhled obsahu zavřené sekce („4 vlastníci", „zatím nic")
     .ks-akce       akce sekce, vpravo v hlavičce
     .ks-telo       obsah rozbalené sekce
     .ks-kv         hustá mřížka POPISEK | HODNOTA (.je-dvojita = dvě dvojice na řádek)
   ============================================================================================ */

/* HUSTOTA JE VLASTNOSTÍ KARTY. Stupnice má TŘI kroky (nadpis · obsah · drobné) a jednu výšku
   řádku; čtvrtý stupeň by musel mít vlastní význam a ten tu není.

   `--pol-*` tu stojí schválně pod svým původním jménem: tabulku uvnitř sekcí kreslí GLOBÁLNÍ
   `.mck .pol-tab` (backoffice-mock.css) a ta si výšku řádku i velikosti bere právě odtud.
   Kdyby se karta jmenovala jinak, tabulka by v ní spadla na dědění a řádky by se rozešly.
   Zkušebna i ostrá karta tak drží JEDNA čísla. */
.ks-karta {
    --pol-nadpis: 0.72rem;      /* kapitálky nadpisu sekce */
    --pol-text: 0.82rem;        /* obsah, pole, věty */
    --pol-drobne: 0.74rem;      /* nápovědy, štítky, vysvětlivky */
    --pol-radek: 28px;          /* JEDNA výška řádku: pole i buňky tabulky */
}

.ks-karta,
.ks-sekce,
.ks-souhrn {
    --ks-nadpis: var(--pol-nadpis, 0.72rem);   /* kapitálky hlavičky sekce */
    --ks-text: var(--pol-text, 0.82rem);       /* obsah, hodnoty */
    --ks-drobne: var(--pol-drobne, 0.74rem);   /* popisky, náhledy, štítky */
    --ks-radek: var(--pol-radek, 28px);        /* výška řádku tabulky */
    --ks-radek-kv: 26px;                       /* mřížka údajů stojí o dva pixely blíž na sebe */
    --ks-popisek: 132px;                       /* pevný sloupec popisků */
    --ks-popisek-2: 152px;                     /* … u dvou dvojic na řádek */
}

/* --- rám karty ---------------------------------------------------------------------------- */

/* ŽÁDNÝ `overflow: hidden` (vědomá odchylka od návrhu). Skrytý přetok dělá ze schránky
   SCROLL CONTAINER, takže by se `position: sticky` v záhlaví tabulky přilepilo k němu — a ten
   se neroluje, tedy by se nepřilepilo nikam. Zaoblení místo toho drží první a poslední dítě.
   Změřeno v prohlížeči, z CSS to vidět není. */
.ks-karta {
    background: var(--barva-povrch);
    border: 1px solid var(--barva-linka);
    border-radius: var(--radius-lg);
    box-shadow: var(--stin-jemny);
    font-size: var(--ks-text);
    color: var(--barva-text);
    /* Šířku určuje rodič; obsah širší než karta si posuv řeší sám (viz `.ks-telo`). */
    min-width: 0;
}

/* Karta visí POD LIŠTOU OUŠEK spisu, takže horní rohy jsou hranaté a ouška na ni navazují —
   týž tvar, jaký měl `.spis-panel` do 17. 8. 2026. Zaoblené rohy pod plochým ouškem vypadají
   jako dva nesouvisející prvky. */
.ks-karta.je-pod-ousky,
.ks-karta.je-pod-ousky > .ks-karta-hlava {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Zaoblení drží PODBARVENÉ prvky na krajích, ne ořez schránky (viz výš). Poslední sekce nemá
   spodní linku — kreslila by ji přes zaoblený okraj karty. */
.ks-karta > .ks-sekce:last-child > .ks-hlava { border-bottom: 0; }

.ks-karta > .ks-sekce:last-child:not(.je-otevrena) > .ks-hlava {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* --- hlavička karty (identita + akce) ------------------------------------------------------ */

/* JEDEN ŘÁDEK: název · zařazení · akce vpravo. Hlavní číslo tu NENÍ — je v souhrnném pruhu pod
   tím, a dvakrát pod sebou by vypadalo jako dva různé údaje. */
.ks-karta-hlava {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 14px;
    background: var(--cream-50);
    border-bottom: 1px solid var(--barva-linka);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.ks-karta-nazev {
    font-family: var(--font-nadpis);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--brown-800);
}

.ks-chip {
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--cream-200);
    color: var(--brown-500);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ks-karta-akce {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Tlačítka v kartě jsou DROBNÁ. `.tlacitko` je stavěné na plochu stránky (0,85rem/1,6rem,
   pilulka) a v hlavičce sekce vysoké 30 px by ji rozrazilo. Sráží se to tady, na jednom
   místě — ne v každé stránce zvlášť. */
.ks-akce .tlacitko,
.ks-karta-akce .tlacitko {
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    font-size: var(--ks-drobne);
}

/* --- souhrnný pruh ------------------------------------------------------------------------ */

/* JEN KE ČTENÍ — vědomé rozhodnutí, ne opomenutí. Vlastník i pořizovací cena stojí zároveň
   v „Údajích položky"; dvě zápisová místa pro týž údaj se do měsíce rozejdou a nikdo nepozná,
   které z nich je pravda. Pruh je výřez, ne formulář. */
.ks-souhrn {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(200px, 0.85fr);
    border-bottom: 1px solid var(--barva-linka);
}

.ks-souhrn > div {
    padding: 10px 14px;
    min-width: 0;
}

.ks-souhrn > div + div { border-left: 1px solid var(--barva-linka); }

/* Na užší ploše se pruh složí pod sebe — svislice by jinak rozsekala tři sloupce na proužky. */
@media (max-width: 900px) {
    .ks-souhrn { grid-template-columns: minmax(0, 1fr); }
    .ks-souhrn > div + div {
        border-left: 0;
        border-top: 1px solid var(--barva-linka);
    }
}

.ks-oko {
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--barva-text-tlumeny);
}

.ks-cislo {
    font-family: var(--font-cisla);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
}

.ks-pod {
    margin-top: 3px;
    font-size: var(--ks-drobne);
    color: var(--barva-text-tlumeny);
}

.ks-stavy {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ks-stav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--ks-drobne);
}

.ks-stav > span:first-child { color: var(--barva-text-tlumeny); }

/* --- pilulka stavu ------------------------------------------------------------------------ */

/* TŘI BARVY Z NAŠICH TOKENŮ, ne z mockupu natvrdo. Je to táž trojice, jakou nese `maj-poz-stav`
   ve složení portfolia — kdyby měla karta vlastní odstíny, znamenala by zelená na dvou místech
   téže obrazovky dvě různé věci. */
.ks-bal {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.ks-bal.je-ok { background: var(--c-zelena-svetla); color: var(--barva-akcent-text); }

/* Jantar ze škály (`--warning`), ne #f8edd6/#8a5c07 z mockupu: ten pár má na kontrast 4,1 : 1,
   což je pod AA — a publikum Alfréda je 45+ (viz tokeny.css). Namíchané 5,2 : 1. */
.ks-bal.je-pozor {
    background: color-mix(in srgb, var(--warning) 16%, var(--white));
    color: color-mix(in srgb, var(--warning) 55%, var(--brown-900));
}

.ks-bal.je-klid { background: var(--barva-pozadi); color: var(--barva-text-tlumeny); }

/* --- skládací sekce ------------------------------------------------------------------------ */

.ks-sekce { min-width: 0; }

/* Sousední sekce sdílejí jednu linku — dvě by kreslily dvojitý pruh. */
.ks-sekce + .ks-sekce > .ks-hlava { border-top: 0; }

/* HLAVIČKA SEKCE = odpověď na „sekce nejsou poznat". Krémový proužek, kapitálky, vodorovná
   zelená čárka a akce vpravo. JEDEN řádek, 30 px. */
.ks-hlava {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    margin: 0;
    padding: 0 12px;
    background: var(--cream-50);
    border-top: 1px solid var(--barva-linka);
    border-bottom: 1px solid var(--barva-linka);
    font: inherit;
}

.ks-hlava:hover { background: var(--cream-100); }
.ks-sekce.je-otevrena > .ks-hlava { background: var(--cream-100); }

/* Přepínač je SKUTEČNÉ tlačítko, ne div s `role` — klávesnice, Enter i mezerník zadarmo.
   Vyplní hlavičku až k akcím, takže „kliknutelný je celý proužek" platí i tady; akce ale
   uvnitř tlačítka ležet nesmí (vnořený ovládací prvek je neplatné HTML a čtečka ho zamlčí). */
.ks-prepinac {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ks-prepinac:focus-visible {
    outline: 2px solid var(--barva-text);
    outline-offset: -2px;
    border-radius: var(--radius-xs);
}

.ks-sipka {
    flex: none;
    width: 11px;
    font-size: 10px;
    line-height: 1;
    color: var(--brown-300);
    transition: transform var(--dur-fast) var(--ease-standard);
}

.ks-sekce.je-otevrena .ks-sipka { transform: rotate(90deg); }

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

/* VODOROVNÁ čárka. Svislý barevný pruh vlevo u karet je zakázaný vzor (AI klišé), tak se
   čárka položila naplocho do hlavičky. */
.ks-tik {
    flex: none;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--c-zelena);
}

.ks-titul {
    flex: none;
    font-size: var(--ks-nadpis);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--brown-600);
    white-space: nowrap;
}

/* Náhled obsahu zavřené sekce. Ustupuje: je to druhá informace v řádku, ne nadpis — a když
   se nevejde, ořízne se on, ne název sekce. */
.ks-nahled {
    min-width: 0;
    font-size: var(--ks-drobne);
    color: var(--barva-text-tlumeny);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-akce {
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* TĚLO SEKCE NIC NEOŘEZÁVÁ. Uvnitř visí hustá tabulka složení portfolia, která je ŠIRŠÍ než
   karta a nese si vlastní vodorovný posuv (`.maj-poz-obal`). Kdyby tělo dostalo `overflow`,
   stanou se dvě věci naráz: vznikne druhý scroll container (a `position: sticky` v záhlaví
   tabulky se přilepí k němu, tedy nikam) a při `hidden` by se posuvník vnitřní tabulky uřízl.
   `min-width: 0` je tu proto, aby široký obsah netlačil kartu do šířky stránky. */
.ks-telo {
    padding: 8px 12px 10px;
    min-width: 0;
}

/* --- hustá mřížka POPISEK | HODNOTA -------------------------------------------------------- */

/* Pevný sloupec popisků srovná všechny sekce karty na jednu svislici — to je ta
   „systematičnost", která kartě chyběla. Řádky skoro na sebe: 26 px. */
.ks-kv {
    display: grid;
    grid-template-columns: var(--ks-popisek) minmax(0, 1fr);
    align-items: stretch;
    column-gap: 12px;
    margin: 0;
}

/* DVĚ DVOJICE NA ŘÁDEK u krátkých hodnot (vzor Fio „Údaje o cenách"): šestnáct údajů se složí
   na osm řádků. Dělící linka je na PRVNÍ hodnotě řádku (`4n+2` = 2., 6., 10. dítě). */
.ks-kv.je-dvojita {
    grid-template-columns: var(--ks-popisek-2) minmax(0, 1fr) var(--ks-popisek-2) minmax(0, 1fr);
}

.ks-kv.je-dvojita > dd:nth-child(4n + 2) {
    padding-right: 26px;
    border-right: 1px solid var(--barva-linka);
}

/* Pod mez šířky se dvojitá mřížka vrátí k jedné dvojici — dvě dvojice v úzkém sloupci znamenají
   čtyři sloupce po 80 px a z hodnot jsou tři tečky. */
@media (max-width: 1000px) {
    .ks-kv.je-dvojita { grid-template-columns: var(--ks-popisek) minmax(0, 1fr); }
    .ks-kv.je-dvojita > dd:nth-child(4n + 2) { padding-right: 0; border-right: 0; }
}

/* DLOUHÝ POPISEK SE ZALAMUJE, NEOŘEZÁVÁ. V návrhu měl `dt` pevnou výšku a tři tečky, takže se
   z „JAK TOMU ŘÍKÁ RODINA" stalo „JAK TOMU ŘÍKÁ …" — a popisek, který se nedá dočíst,
   nepojmenovává nic. Výška je proto MINIMÁLNÍ: běžný popisek drží rytmus 26 px, dlouhý si
   vezme dva řádky a zvedne jen svůj. */
.ks-kv dt {
    display: flex;
    align-items: center;
    min-height: var(--ks-radek-kv);
    padding: 2px 0;
    font-size: var(--ks-drobne);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--barva-text-tlumeny);
    overflow-wrap: break-word;
}

.ks-kv dd {
    display: flex;
    align-items: center;
    min-height: var(--ks-radek-kv);
    margin: 0;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

/* Hodnota se naopak ořezává třemi tečkami — je to jeden údaj, ne popisek, a celý zápis nese
   `title` (a v přepisu samotné pole). */
.ks-kv dd > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-kv dd.je-tlumena { color: var(--barva-text-tlumeny); }

/* VĚTA SE ZALAMUJE, NEOŘEZÁVÁ. Výjimka z pravidla nad tím: u zamčené hodnoty nestojí v buňce
   údaj, ale vysvětlení („7 500 000 Kč — mění se tlačítkem „Přecenit…""). Tři tečky z něj
   na šířce 1440 px a míň udělaly „7 500 000 Kč — mění se tl…", tedy uříznou přesně tu část,
   kvůli které tam ta věta je. Naměřeno v prohlížeči 17. 8. 2026 (1440 px: 32 px přes okraj,
   1280 px: 112 px). */
.ks-kv dd.je-veta { align-items: flex-start; padding: 4px 0; }

.ks-kv dd.je-veta > span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}