/* ══════════════════════════════════════════════════════════════════════════════════════════
   PRŮVODCE ONBOARDINGEM (ALF-25, ADR-0123) — podoba klientského toku.

   ODKUD: 1:1 z návrhu Pavla Müllera „Alfréd - Onboarding" (5. 9. 2026). Názvy tříd jsou
   z návrhu ZÁMĚRNĚ ponechané (.wcard, .och, .chkt, .pv…) — proti návrhu se to měří a
   přejmenování by tu shodu rozvázalo. Aby se plochá jména nesrazila se zbytkem aplikace,
   je CELÝ list odscopovaný pod kořenovou třídou `.onb` (v návrhu `.ob`).

   ÚKLID PO E2 (19. 9. 2026, ADR-0138): s kroky `KrokInventar`, `KrokZaznamy`, `KrokPolozky`,
   `KrokKontrola` a `PolozkaRadek` odešlo 63 pravidel pro 31 tříd, které v aplikaci nikdo
   nevykresluje (.pcard a její vnitřek, .tile/.tiles/.tilegrp, .sumbar, .sdots/.stepw, .seg,
   .money, .stack, .add, .btn-d, .pridatdvojice, sloupce .vl/.ow a řádek tr.grp v .chkt,
   .hero .hs, .item .im/.iv). Ověřeno jménem po jménu proti markupu celé aplikace, ne jen
   průvodce. PROČ TO NENÍ KOSMETIKA: osiřelé pravidlo vypadá jako platná podoba, takže se za
   půl roku „opravuje" na komponentě, která neexistuje. Pozor na CELÝ selektor — pravidlo
   `.onb .chkt td.vl` je mrtvé i s živou `.chkt`, protože sloupec `vl` tabulka od E2 nekreslí.
   Že se to nevrátí, hlídá `OnboardingCssTests.Kazde_pravidlo_listu_ma_v_aplikaci_markup`.

   PROČ GLOBÁLNÍ LIST, A NE SCOPED CSS ROZVRŽENÍ: podoba se kreslí uvnitř cizích komponent —
   ostrov průvodce, jednotlivé kroky, panel portálu — kam scoped pravidla nedosáhnou. Týž
   důvod jako u dialog.css, upravitelna-hodnota.css a karta-sekce.css (ADR-0092, ADR-0094).

   BARVY A ROZESTUPY SE NEOPISUJÍ: všechno jde přes tokeny z tokeny.css, které se s návrhem
   shodují jménem i hodnotou. Kde návrh sáhl po holé barvě (#a8741a u varování, #7f930a
   u zaškrtnutí), je to tady taky — token pro ni v systému není.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.onb {
    font-family: var(--font-body);
    color: var(--brown-600);
    background: var(--cream-100);
    min-height: 100vh;
}

/* ── barvy rozpadu majetku (ADR-0138 E5) ──────────────────────────────────────────────────
   Sedm barev je PALETA NÁVRHU (`PAL`), osmá je hnědošedá z majetkových grafů aplikace
   (`--mjt-graf-8`) — tříd průvodce je čtrnáct a sedm barev by se opakovalo dvakrát.
   Kterou třídu obarví která, rozhoduje `BarvaTridyPruvodce` (index z KATALOGU, ne z grafu:
   klient přidává položky jednu po druhé a graf se mu nesmí při každém uložení přebarvit). */
.onb {
    --onb-graf-0: #a59c97;            /* třída mimo katalog — nesmí vypadat jako platná */
    --onb-graf-1: var(--green-700);   /* oliva */
    --onb-graf-2: var(--green-500);   /* limetka */
    --onb-graf-3: var(--green-300);   /* světlá limetka */
    --onb-graf-4: var(--brown-500);   /* hnědá */
    --onb-graf-5: var(--brown-300);   /* písková */
    --onb-graf-6: var(--brown-200);   /* krémová */
    --onb-graf-7: #5f7d98;            /* modrošedá — v globálních tokenech není */
    --onb-graf-8: var(--brown-400);   /* hnědošedá */
}

.onb *,
.onb *::before,
.onb *::after { box-sizing: border-box; }

.onb a { text-decoration: none; color: var(--green-700); }
.onb a:hover { color: var(--brown-700); }
.onb button { font-family: var(--font-body); }

/* ── společná typografie hlavičky ──────────────────────────────────────────────────────── */
.onb .wrapc { padding: 26px 40px 60px; }

.onb .hd {
    position: relative;
    padding-top: 15px;
    border-bottom: 1px solid var(--border-hairline);
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.onb .hd::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 34px; height: 3px;
    border-radius: 2px;
    background: var(--green-500);
}

.onb .eyebrow {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brown-400);
}

.onb .h1 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -.025em;
    color: var(--brown-700);
    margin: 8px 0 0;
    line-height: 1.14;
    text-wrap: pretty;
}

.onb .hsub {
    font-size: 13.5px;
    color: var(--brown-400);
    margin-top: 9px;
    line-height: 1.55;
}

.onb .muted { color: var(--brown-400); }

.onb .lnk {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--green-700);
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
}

.onb .lnk:hover { color: var(--brown-700); }

/* ── tlačítka ──────────────────────────────────────────────────────────────────────────── */
/* POZOR, JE TO SEZNAM SELEKTORŮ: kdo sem doplní další vlastnost, dá ji VŠEM tlačítkům.
   10. 9. 2026 takhle dostala `width: 100%` i „Zpět" a „Pokračovat" — roztáhla se přes celou
   plochu a lišta kroku se rozpadla na dva řádky. Pravidlo pro jedno tlačítko patří do
   vlastního bloku. */
.onb .btn-g,
.onb .btn-s { white-space: nowrap; }

.onb .btn-g {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-md);
    border: 0;
    background: var(--green-500);
    color: var(--brown-700);
    font: 700 14px var(--font-body);
    cursor: pointer;
}

.onb .btn-g:hover { background: var(--green-600); color: var(--brown-700); }
.onb .btn-g:active { background: var(--green-700); }
.onb .btn-g svg { width: 16px; height: 16px; }

.onb .btn-g[aria-disabled="true"],
.onb .btn-g:disabled {
    background: var(--cream-200);
    color: var(--brown-400);
    cursor: not-allowed;
}

.onb .btn-s {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-hairline);
    background: var(--white);
    font: 600 13px var(--font-body);
    color: var(--brown-600);
    cursor: pointer;
}

.onb .btn-s:hover { border-color: var(--green-300); color: var(--green-700); }
.onb .btn-s svg { width: 15px; height: 15px; }

/* ── karty uvítací obrazovky ───────────────────────────────────────────────────────────── */
.onb .wcard {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px 22px;
}

.onb .wcard .wh {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--brown-700);
    letter-spacing: -.01em;
}

.onb .wcard .ws {
    font-size: 12.5px;
    color: var(--brown-400);
    margin-top: 6px;
    line-height: 1.55;
}

.onb .wkarty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.onb .chl { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }

.onb .chl .r {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    font-size: 12.5px;
    color: var(--brown-600);
    padding: 7px 0;
    border-bottom: 1px solid var(--cream-200);
}

.onb .chl .r:last-child { border-bottom: 0; }

.onb .chl .r i {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--brown-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 10px var(--font-body);
    font-style: normal;
}

.onb .bl {
    margin: 0; padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.onb .bl li {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--brown-500);
    padding-left: 16px;
    position: relative;
}

.onb .bl li::before {
    content: "";
    position: absolute;
    left: 0; top: 7px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--green-500);
}

/* „Jak chráníme vaše data" — v zavřeném stavu vypadá jako odkaz z návrhu, po rozkliknutí
   ukáže odpověď. Značka trojúhelníčku se schovává, jinak by z odkazu byl rozbalovač. */
.onb .ochrana { margin-top: 14px; }

.onb .ochrana > summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
}

.onb .ochrana > summary::-webkit-details-marker { display: none; }
.onb .ochrana > summary::marker { content: ""; }

/* ══ TMAVÝ GRAVÍROVANÝ PÁS (`PasZnacky`) ═══════════════════════════════════════════════
   Čísla jsou z návrhu Onboarding v2 (`.wall`) doslova. Pás sdílí Uvítání a Hotovo, takže
   jsou to jediná čísla o něm — druhá sada by znamenala dvě různě vysoké hlavičky téhož toku.

   GRAVURA JE TROJITÁ: stín posunutý vlevo nahoru (`sh`), světlo vpravo dolů (`hi`) a plná
   bílá skoro neviditelně (`fc`). Naše ikona stromu je ČTVERCOVÁ (návrh má 180/190), proto
   `aspect-ratio: 1` — s poměrem z návrhu by se `object-fit: contain` zmenšil a gravura by
   se odlepila od pravé hrany. */
.onb .wall {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 38px 44px 42px;
    background:
        radial-gradient(110% 150% at 8% 0%, rgba(244, 239, 228, .085), transparent 52%),
        radial-gradient(90% 120% at 100% 100%, rgba(0, 0, 0, .34), transparent 60%),
        linear-gradient(118deg, #3b2c21 0%, #2e231a 46%, #241b14 100%);
}

.onb .wallsl {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 34%;
    background: linear-gradient(90deg, rgba(244, 239, 228, .07), transparent);
    pointer-events: none;
}

.onb .wallgr {
    position: absolute;
    right: -9%; top: -16%;
    width: 54%;
    min-width: 360px;
    aspect-ratio: 1;
    pointer-events: none;
}

.onb .wallgr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.onb .wallgr img.sh { transform: translate(-2px, -2px); filter: brightness(0) saturate(0) blur(.7px); opacity: .2; }
.onb .wallgr img.hi { transform: translate(2px, 3px); filter: brightness(0) saturate(0) invert(1) blur(.5px); opacity: .045; }
.onb .wallgr img.fc { filter: brightness(0) saturate(0) invert(1); opacity: .02; }

.onb .wallveil {
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg, rgba(36, 27, 20, .88) 0%, rgba(36, 27, 20, .62) 38%, transparent 66%);
    pointer-events: none;
}

.onb .wallin {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: end;
}

.onb .wallcopy { min-width: 0; }
.onb .wallznacka { height: 40px; display: block; }

.onb .walleyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green-400);
    margin-top: 30px;
}

.onb .wallh1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--cream-100);
    margin: 14px 0 0;
    text-wrap: pretty;
}

.onb .wallp {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-onDark-muted);
    margin: 14px 0 0;
    max-width: 620px;
    text-wrap: pretty;
}

.onb .wallbtn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    margin-top: 28px;
    padding: 0 16px 0 26px;
    border-radius: var(--radius-md);
    background: var(--green-500);
    color: var(--brown-900);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

.onb .wallbtn:hover { background: var(--green-600); color: var(--brown-900); }
.onb .wallbtnt { display: flex; flex-direction: column; gap: 3px; }
.onb .wallbtnh { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.onb .wallbtns { font-size: 12px; font-weight: 500; opacity: .68; }

.onb .wallbtni {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(46, 35, 26, .16);
}

.onb .wallbtni svg { width: 17px; height: 17px; }

/* KARTA PORADCE. Návrh má na místě monogramu PORTRÉT 42 px; u nás jsou fotky data prostředí
   (ADR-0119) a poradce žádnou nevede — rozměr i kulatost zůstávají, ať karta drží výšku,
   až fotka přibude. */
.onb .wallporadce {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    background: rgba(30, 22, 16, .82);
    border: 1px solid rgba(244, 239, 228, .15);
    border-radius: var(--radius-md);
    padding: 12px 16px 12px 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

.onb .wallmono {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--green-700);
    color: var(--cream-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.onb .wallpl {
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(244, 239, 228, .42);
}

.onb .wallpj { font-size: 13.5px; font-weight: 700; color: var(--cream-100); margin-top: 5px; }
.onb .wallpk { font-size: 11.5px; color: var(--text-onDark-muted); margin-top: 4px; }

/* ══ SVĚTLÁ KARTA „Tohle bude váš portál" ══════════════════════════════════════════════
   Ve v2 nahradila tmavý marketingový pruh (`.mkt`), který tu byl do 20. 9. 2026. */
.onb .wportal { margin-top: 16px; padding: 26px 28px 28px; }

.onb .wportal-hlava {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.onb .wportal-text { max-width: 620px; }

.onb .wportal-h {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 25px;
    line-height: 1.22;
    letter-spacing: -.02em;
    color: var(--brown-700);
    margin-top: 11px;
    text-wrap: pretty;
}

.onb .wportal-p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--brown-500);
    margin-top: 11px;
    text-wrap: pretty;
}

.onb .wportal-akce {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 0 0 auto;
    max-width: 260px;
}

.onb .wportal-pozn { font-size: 11.5px; line-height: 1.55; color: var(--brown-400); }

/* RÁMEČEK ILUSTRACE JE TMAVÝ SCHVÁLNĚ. Návrh sem dává snímek portálu; u nás je živá kresba
   (`UkazkaPortaluObrazek`), a ta má stíny a prstenec navržené na tmavé pozadí — na krémové
   kartě by z nich zbyly šedivé skvrny. Šířka je omezená, aby kresba držela geometrii
   z návrhu (karty na ní zprava i zleva dosedají na pevné body). */
.onb .wportal-ram {
    margin-top: 22px;
    border-radius: 10px;
    padding: 30px 34px 34px;
    background: var(--brown-900);
}

.onb .wportal-ram .mktart { max-width: 640px; margin: 0 auto; }

/* Patka karty „Co si připravit" (návrh v2). */
.onb .wfoot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cream-200);
    font-size: 12px;
    color: var(--brown-400);
    line-height: 1.6;
}

/* ── ilustrace portálu v rámečku karty (návrh `mktart`) ───────────────────────────────── */
/* Čísla jsou z prototypu doslova. Kreslí se tu ŽIVÁ data ukázkové rodiny (ALF-25), ne
   zástupné proužky jako v návrhu — proto mají tři místa text tam, kde má návrh šedivý
   obdélníček: jméno rodiny v hlavičce, název třídy v řádku a procento vpravo. */
/* VÝŠKA JE VĚTŠÍ NEŽ V NÁVRHU (296 px) a je to změřené, ne odhadnuté: náhled portálu nese
   u nás TEXT (jméno rodiny, názvy tříd, procenta), takže je karta vyšší než Pavlova kresba
   ze zástupných proužků — a karta s iniciálami, která na ni podle návrhu dosedá zprava,
   zakrývala poslední řádek i s procentem. Vidět jen ze snímku (10. 9. 2026). */
.onb .mktart { position: relative; min-height: 330px; }

.onb .shot {
    position: absolute;
    left: 6%; top: 0; right: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 26px 50px rgba(20, 14, 8, .45), 0 3px 0 rgba(255, 255, 255, .05);
}

.onb .shotrail {
    background: #3d2e21;
    padding: 13px 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.onb .shotrail .rw {
    display: block;
    height: 9px; width: 26px;
    border-radius: 2px;
    background: var(--cream-100);
    opacity: .9;
    margin-bottom: 5px;
}

.onb .shotrail .rl {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: rgba(244, 239, 228, .22);
    width: 100%;
}

.onb .shotrail .rl.s { width: 62%; }
.onb .shotrail .rl.on { background: var(--green-500); width: 78%; }

.onb .shotbody {
    padding: 15px 17px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.onb .shoth {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Jméno ukázkové rodiny. V návrhu je tu zástupný proužek — u nás musí být vidět, ČÍ čísla
   pod tím stojí (ALF-25): kdo se dívá, čte nejdřív to největší, a to je částka pod tím. */
.onb .shotrod {
    font-size: 12px;
    font-weight: 700;
    color: var(--brown-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onb .shoth .pill {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--surface-sunken, var(--cream-100));
    border: 1px solid var(--border-hairline);
    padding: 2px 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brown-400);
}

.onb .shotnum {
    font-weight: 700;
    font-size: 31px;
    letter-spacing: -.03em;
    color: var(--brown-700);
    line-height: 1;
}

.onb .shotnum small { font-size: 14px; color: var(--brown-400); font-weight: 600; }
.onb .shotsub { font-size: 11px; color: var(--brown-400); margin-top: -4px; }

.onb .shotstack {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}

.onb .shotstack i { display: block; height: 100%; }

.onb .shotrows { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }

.onb .shotrows .sr {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
}

.onb .shotrows .sw { width: 9px; height: 9px; border-radius: 2px; }

.onb .shotrows .sn {
    font-size: 11px;
    color: var(--brown-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onb .shotrows .sv { font-size: 11px; font-weight: 700; color: var(--brown-700); }

.onb .chip1 {
    position: absolute;
    left: 0; bottom: 8px;
    width: 212px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--white);
    border-radius: 12px;
    padding: 13px 15px;
    box-shadow: 0 20px 40px rgba(20, 14, 8, .42);
}

.onb .ring {
    width: 46px; height: 46px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onb .ring i {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--white);
    display: block;
}

.onb .chip1t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.onb .chip1h {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brown-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onb .chip1s { font-size: 10.5px; color: var(--brown-400); }

.onb .chip2 {
    position: absolute;
    right: 2px; bottom: -6px;
    width: 172px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--cream-50);
    border: 1px solid var(--border-hairline);
    border-radius: 12px;
    padding: 13px 15px 15px;
    box-shadow: 0 20px 40px rgba(20, 14, 8, .38);
}

.onb .inis2 { display: flex; gap: 5px; }

.onb .inis2 .i1,
.onb .inis2 .i2 {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 9.5px var(--font-body);
    background: var(--cream-200);
    color: var(--green-700);
}

.onb .inis2 .i2 { background: var(--green-100); }

.onb .chip2s { font-size: 10.5px; color: var(--brown-400); margin-top: 2px; }

/* ── obrazovka Návrat ──────────────────────────────────────────────────────────────────── */
.onb .pokrac {
    width: 100%;
    justify-content: space-between;
    min-height: 64px;
    font-size: 16px;
}

.onb .pokrac .meta { font-weight: 600; font-size: 13px; opacity: .8; }

.onb .c {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.onb .c-pad { padding: 20px 22px; }

.onb .c-h {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    color: var(--brown-700);
    margin: 0;
}

.onb .mst {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: 15px 16px;
}

.onb .mst .l { font-size: 12px; color: var(--brown-400); }

.onb .mst .v {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--brown-700);
    margin-top: 6px;
    line-height: 1;
}

.onb .mst .s { font-size: 12px; margin-top: 6px; color: var(--brown-400); }

.onb .kaplist { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

/* ── řádek kapitoly (levý sloupec průvodce i seznam na Návratu) ────────────────────────── */
.onb .och {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 11px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.onb .och:hover { background: var(--cream-50); }

.onb .och.on {
    background: var(--white);
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--border-hairline);
}

.onb .kaplist .och {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    grid-template-columns: 20px minmax(0, 1fr) auto;
    padding: 15px 16px;
    align-items: center;
}

.onb .ocd {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--brown-300);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: var(--white);
}

.onb .ocd svg { width: 11px; height: 11px; opacity: 0; }
.onb .och.done .ocd { background: var(--green-700); border-color: var(--green-700); }
.onb .och.done .ocd svg { opacity: 1; }
.onb .och.wip .ocd { border-color: var(--green-500); box-shadow: inset 0 0 0 3px var(--green-500); }

.onb .ocn {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--brown-700);
    line-height: 1.3;
}

.onb .och.wait .ocn { color: var(--brown-400); font-weight: 500; }
.onb .ocm { display: block; font-size: 11px; color: var(--brown-400); margin-top: 3px; }

/* ── shell průvodce ────────────────────────────────────────────────────────────────────── */
.onb .obh {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 32px;
    border-bottom: 1px solid var(--border-hairline);
    background: var(--cream-50);
}

.onb .wm {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--brown-700);
    line-height: 1;
}

.onb .wmo {
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brown-400);
    margin-top: 5px;
}

.onb .whoami {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--brown-500);
}

.onb .ava {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--cream-200);
    color: var(--green-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 12px var(--font-body);
    flex: 0 0 auto;
}

.onb .opaticka {
    padding: 18px 32px 26px;
    border-top: 1px solid var(--border-hairline);
    font-size: 11.5px;
    color: var(--brown-400);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .onb .wrapc { padding: 18px 16px 40px; }
    .onb .obh { padding: 12px 16px; }
    /* Tmavý pás: užší odsazení a menší gravura (návrh `.mob .wall`). Karta poradce jde
       pod nadpis, jinak by z ní na telefonu zbyl proužek. */
    .onb .wall { padding: 26px 22px 30px; }
    .onb .wallgr { width: 70%; min-width: 0; right: -16%; top: -14%; opacity: .75; }
    .onb .wallin { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
    .onb .wallh1 { font-size: 30px; }
    .onb .wportal { padding: 20px 18px 22px; }
    .onb .wportal-ram { padding: 18px 16px 22px; }

    /* Na úzké obrazovce se kresba nemůže překrývat (návrh `.mob .mktart`): karty jdou pod
       sebe, jinak by prstenec i iniciály ležely přes náhled portálu. */
    .onb .mktart { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
    .onb .shot { position: relative; left: 0; right: auto; top: 0; width: 100%; }
    .onb .chip1 { position: relative; left: 0; bottom: auto; width: 100%; }
    .onb .chip2 { position: relative; right: auto; bottom: auto; width: 100%; }
    .onb .opaticka { padding: 16px 16px 24px; }
}

/* ── značka a šířky obsahu ─────────────────────────────────────────────────────────────── */
/* Návrh má značku na Uvítání o čtyři pixely větší než na Návratu — je to jiná obrazovka,
   ne nedopatření: Uvítání je široké a nese celý pruh „Tohle bude váš portál". */
.onb .onb-znacka { height: 30px; display: block; }
.onb .wrapc.siroka .onb-znacka { height: 34px; }

.onb .wrapc.siroka { max-width: 1180px; margin: 0 auto; }
.onb .wrapc.uzka { max-width: 920px; margin: 0 auto; }

.onb .hd { margin-top: 34px; }
.onb .akce {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.onb .odsazeni { margin-top: 16px; }
.onb .odsazeni-male { margin-top: 14px; }

/* ══ OSTROV PRŮVODCE ═══════════════════════════════════════════════════════════════════════
   Tři sloupce z návrhu: kapitoly · krok · panel portálu. Pod 900 px se postranní sloupce
   skrývají — na telefonu je průvodce jednosloupcový a kapitoly se přepínají v obsahu.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.onb .wgrid {
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr) 356px;
    gap: 0;
    align-items: start;
}

.onb .wside {
    padding: 24px 20px 32px;
    border-right: 1px solid var(--border-hairline);
    min-height: calc(100vh - 61px);
    position: sticky;
    top: 0;
}

.onb .wside-patka {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--cream-200);
}

/* VCHOD DO VLASTNÍHO PORTÁLU v patce postranní lišty (návrh, `goPeek`): tmavé tlačítko přes
   celou šířku, pod ním věta drobným písmem. Čísla jsou z prototypu. */
.onb .wside-portal {
    width: 100%;
    margin: 14px 0 9px;
    min-height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-md);
    background: var(--brown-700);
    color: var(--cream-100);
    font: 600 12.5px var(--font-body);
}

.onb .wside-portal:hover { background: #3d2e21; color: var(--cream-100); }
.onb .wside-portal svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Pata panelu „Váš portál vzniká" — druhý vchod (návrh `pvfull`). */
.onb .pvfull { width: 100%; margin-top: 14px; }

.onb .pvfullh {
    margin-top: 11px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--brown-400);
    text-align: center;
}

.onb .elbl {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brown-400);
    margin-bottom: 10px;
}

.onb .wmain { padding: 22px 40px 48px; min-width: 0; }

.onb .savebar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 14px;
    row-gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--brown-400);
    line-height: 1.4;
}

.onb .savebar .chl {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brown-400);
    min-width: 0;
    margin-top: 0;
}

.onb .savebar .sv { display: inline-flex; align-items: center; gap: 7px; }

.onb .savebar .sv i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green-700);
}

/* „Proč se ptáme" — rozbalovací vysvětlivka, ne překryv: odpověď má zůstat vedle otázky. */
.onb .proc { margin-top: 16px; }

.onb .proc summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--cream-50);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    padding: 7px 13px;
    cursor: pointer;
    font: 600 12px var(--font-body);
    color: var(--brown-500);
    list-style: none;
}

.onb .proc summary::-webkit-details-marker { display: none; }
.onb .proc summary:hover { background: var(--white); color: var(--brown-700); }

.onb .proc p {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.62;
    color: var(--brown-600);
    max-width: 560px;
    text-wrap: pretty;
}

/* ── pole formuláře ────────────────────────────────────────────────────────────────────── */
.onb .flds { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 26px; }

.onb .fl {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: span 2;
    min-width: 0;
}

.onb .fl.half { grid-column: span 1; }

.onb .fll { font-size: 13px; font-weight: 600; color: var(--brown-600); }
.onb .flh { font-size: 12px; color: var(--brown-400); line-height: 1.5; }

.onb .in {
    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%;
}

.onb .in:focus { border-color: var(--green-500); box-shadow: var(--shadow-focus); }

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

.onb .fchips { display: flex; gap: 8px; flex-wrap: wrap; }

.onb .fchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-hairline);
    background: var(--white);
    font: 500 13.5px var(--font-body);
    color: var(--brown-600);
    cursor: pointer;
    text-align: left;
}

.onb .fchip:hover { border-color: var(--green-300); }

.onb .fchip.on {
    background: var(--green-100);
    border-color: var(--green-300);
    color: var(--green-700);
    font-weight: 600;
}

.onb .cards { display: grid; gap: 9px; }
.onb .cards.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.onb .ocard {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    text-align: left;
    padding: 15px 16px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--white);
    cursor: pointer;
    width: 100%;
    min-height: 44px;
}

.onb .ocard:hover { border-color: var(--green-300); background: var(--cream-50); }
.onb .ocard.on { border-color: var(--green-500); background: var(--green-100); }

.onb .ocard .rdo {
    width: 17px; height: 17px;
    border-radius: 50%;
    border: 1.5px solid var(--brown-300);
    margin-top: 2px;
    flex: 0 0 auto;
}

.onb .ocard .rdo svg { display: none; }

.onb .ocard.on .rdo {
    background: var(--green-700);
    border-color: var(--green-700);
    box-shadow: inset 0 0 0 3px var(--white);
}

.onb .ocard .ck {
    width: 17px; height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--brown-300);
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.onb .ocard.on .ck { background: var(--green-700); border-color: var(--green-700); }
.onb .ocard .ck svg { width: 11px; height: 11px; opacity: 0; }
.onb .ocard.on .ck svg { opacity: 1; }

.onb .ocard .cn {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--brown-700);
    line-height: 1.35;
}

.onb .ocard .cs {
    display: block;
    font-size: 12px;
    color: var(--brown-400);
    line-height: 1.5;
    margin-top: 4px;
    text-wrap: pretty;
}

/* ── lišta kroku ───────────────────────────────────────────────────────────────────────── */
.onb .obar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-hairline);
}

.onb .obar .sk {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--brown-400);
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.onb .obar .sk:hover { color: var(--brown-700); }

.onb .empt {
    border: 1px dashed var(--brown-300);
    border-radius: var(--radius-md);
    padding: 22px;
    text-align: center;
    font-size: 13px;
    color: var(--brown-400);
    line-height: 1.6;
    margin-top: 22px;
}

/* Odepření a chyby — VĚTA U PRVKU, kterého se týkají (ADR-0067: v statické klientské tváři
   ani v průvodci nemluví Alfréd a okno prohlížeče je zakázané). */
.onb .onb-chyba {
    font-size: 12.5px;
    line-height: 1.5;
    color: #a8741a;
    background: #f8edd8;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    margin-top: 10px;
}

.onb .onb-nacitam { padding: 26px 40px; }

/* ── panel portálu ─────────────────────────────────────────────────────────────────────── */
.onb .wpanel {
    border-left: 1px solid var(--border-hairline);
    background: var(--cream-50);
    padding: 20px 20px 32px;
    min-height: calc(100vh - 61px);
    position: sticky;
    top: 0;
}

.onb .pvh {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.onb .pvt { font-size: 13.5px; font-weight: 700; color: var(--brown-700); }
.onb .pvs { font-size: 11.5px; color: var(--brown-400); line-height: 1.5; margin-top: 5px; }
.onb .pvlist { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.onb .pv {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--white);
    padding: 12px 13px;
}

.onb .pv.lock { background: transparent; border-style: dashed; border-color: var(--brown-200); }

.onb .pvn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brown-500);
    white-space: nowrap;
}

.onb .pv.lock .pvn { color: var(--brown-300); }
.onb .pvn svg { width: 12px; height: 12px; flex: 0 0 auto; }
.onb .pvb { margin-top: 9px; }

/* Chip „nové" u sekce, kterou právě odemkla dokončená kapitola (návrh `fresh`). */
.onb .pvn .fresh {
    margin-left: auto;
    font-size: 9.5px;
    letter-spacing: .06em;
    color: var(--green-700);
    background: var(--green-100);
    border-radius: 999px;
    padding: 2px 7px;
}

.onb .pvlk { font-size: 11px; color: var(--brown-400); line-height: 1.5; margin-top: 7px; }
.onb .pvlk b { color: var(--brown-500); font-weight: 600; }

.onb .prow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    padding: 4px 0;
    color: var(--brown-500);
}

.onb .prow b {
    color: var(--brown-700);
    font-weight: 600;
    font-family: var(--font-cisla);
    white-space: nowrap;
}

.onb .prow > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── karta „Kvalita dat" (návrh `.qm`) ──────────────────────────────────────────────────── */
.onb .qm {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: 13px 14px;
    margin-bottom: 14px;
}

.onb .qmh {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.onb .qml {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brown-400);
    line-height: 1.2;
}

.onb .qmv {
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brown-700);
    letter-spacing: -.01em;
}

.onb .qsegs { display: flex; gap: 4px; margin-top: 10px; }
.onb .qsegs i { flex: 1; height: 6px; border-radius: 3px; background: var(--cream-200); }
.onb .qsegs i.on { background: var(--green-500); }
.onb .qmn { font-size: 11px; color: var(--brown-400); line-height: 1.55; margin-top: 9px; text-wrap: pretty; }

.onb .qhelp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--cream-200);
    color: var(--brown-500);
    font: 700 9.5px var(--font-body);
    letter-spacing: 0;
    cursor: help;
    outline: none;
}

.onb .qhelp:hover, .onb .qhelp:focus { background: var(--green-100); color: var(--green-700); }

/* NÁPOVĚDA VISÍ UVNITŘ KAPITÁLKOVÉHO POPISKU, takže si musí kapitálky i prostrkání
   ZRUŠIT — jinak z ní je „JAK SE P O Č Í T Á" (táž past jako `.dlg-popisek` v ADR-0092). */
.onb .qtip {
    display: none;
    position: absolute;
    right: -8px;
    top: calc(100% + 9px);
    z-index: 40;
    width: 290px;
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 34px rgba(46, 35, 26, .18);
    padding: 13px 14px;
    font: 400 11.5px var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--brown-600);
    line-height: 1.6;
    text-wrap: pretty;
}

.onb .qhelp:hover .qtip, .onb .qhelp:focus .qtip { display: block; }

.onb .qtip b {
    display: block;
    font: 700 10px var(--font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--brown-400);
    margin: 11px 0 5px;
}

.onb .qtip b:first-child { margin-top: 0; }
.onb .qtip i { display: block; font-style: normal; font-weight: 600; color: var(--green-700); margin-top: 6px; }

.onb .qtip em {
    display: block;
    font-style: normal;
    color: var(--brown-400);
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid var(--cream-200);
}

/* ── tvary sekcí panelu (návrh `isMaj` / `isFam` / `isDebt` / `isRows`) ─────────────────── */
.onb .pvbig { font: 700 21px var(--font-cisla); color: var(--brown-700); letter-spacing: -.02em; }
.onb .pvsm { font-size: 11px; color: var(--brown-400); margin-top: 3px; }
.onb .inis + .pvsm { margin-top: 8px; }
.onb .pvhero { margin-top: 10px; }

.onb .pvhero .hv {
    display: block;
    font: 700 22px var(--font-cisla);
    color: var(--brown-700);
    letter-spacing: -.022em;
    line-height: 1.05;
}

.onb .pvhero .hl { display: block; font-size: 11px; color: var(--brown-400); margin-top: 4px; }

.onb .pvben {
    font-size: 11px;
    line-height: 1.5;
    color: var(--green-700);
    background: var(--green-100);
    border-radius: var(--radius-sm);
    padding: 7px 9px;
    margin-top: 10px;
    text-wrap: pretty;
}

/* Pruh poměru dluhu k majetku. Barva je tady, ne v markupu: pruh má jediný význam,
   takže by ji host jen opisoval do stylu u každého vykreslení. */
.onb .pvminib {
    display: flex;
    height: 6px;
    border-radius: 999px;
    background: var(--cream-200);
    overflow: hidden;
    margin-top: 8px;
}

.onb .pvminib i { height: 100%; background: var(--danger); }

.onb .stack { display: flex; height: 9px; border-radius: 999px; overflow: hidden; margin-top: 9px; }
.onb .stack i { display: block; height: 100%; }

.onb .inis { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }

.onb .ini {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: var(--cream-200);
    color: var(--green-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 10.5px var(--font-body);
}

.onb .ini.g2 { background: var(--green-100); }

/* ── časová osa splácení (návrh `.dtrack`) ─────────────────────────────────────────────── */
.onb .dtt {
    font-size: 11px;
    font-weight: 600;
    color: var(--brown-500);
    margin-top: 14px;
    border-top: 1px solid var(--border-hairline);
    padding-top: 11px;
}

.onb .dtrack {
    position: relative;
    height: 3px;
    border-radius: 2px;
    background: var(--cream-200);
    margin: 20px 4px 0;
}

.onb .dtrack i {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--danger);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2.5px var(--white);
}

.onb .dtrack u {
    position: absolute;
    top: -10px;
    width: 1px;
    height: 8px;
    background: var(--brown-300);
    transform: translateX(-50%);
}

.onb .dyr {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--brown-400);
    margin-top: 9px;
    letter-spacing: .03em;
}

.onb .dfix {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--brown-400);
    margin-top: 7px;
}

.onb .dfix s { width: 2px; height: 8px; background: var(--brown-400); flex: 0 0 auto; text-decoration: none; }
.onb .prow.dsep { border-top: 1px solid var(--border-hairline); margin-top: 6px; padding-top: 2px; }

/* ── pruh odemčení nad obsahem kapitoly (návrh `unlockNote`) ───────────────────────────── */
.onb .unote {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--green-100);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin: 8px 0 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--green-700);
    text-wrap: pretty;
}

.onb .unoteb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--green-700);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-top: 1px;
}

@media (max-width: 900px) {
    .onb .wgrid { grid-template-columns: minmax(0, 1fr); }
    .onb .wside, .onb .wpanel { display: none; }
    .onb .wmain { padding: 16px 16px 90px; }
    .onb .flds { grid-template-columns: minmax(0, 1fr); }
    .onb .fl.half { grid-column: span 1; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   KROKY SE ZÁZNAMY, POLOŽKAMI, KONTROLOU A DOKLADY (ALF-25, úkoly 19 a 20)

   Přeneseno z návrhu 1:1 a odscopováno pod `.onb`, stejně jako zbytek listu. Názvy tříd
   zůstávají z návrhu (`.item`, `.chkt`, `.bal`…) — proti návrhu se podoba měří a přejmenování
   by tu shodu rozvázalo.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.onb .items { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }

.onb .item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: 14px 15px;
}

/* `display: block` navíc proti návrhu: ten kreslí záznamy v `.pcard`, kde je řádkový zlom
   dvěma vnořenými `span`y zajištěný pravidlem `.pch .it`. V ploché `.item` zlom nikdo nedělá,
   takže se jméno a popisek slily do „Adam Ukázkačlen rodiny" (vidět jen ze snímku). */
.onb .item .it { display: block; font-size: 14px; font-weight: 600; color: var(--brown-700); line-height: 1.3; }

/* Pilulka stavu (`.bal`) a tabulka nahraných souborů (`.chkw`/`.chkt` včetně `.rn`, `.rm`,
   sloupce `st` a patičky) odešly 20. 9. 2026 s přepisem kapitoly Dokumenty (ADR-0138 E6):
   doklady kreslí knihovní `Tabulka` (ADR-0131) a stav řádku se v ní neříká pilulkou. */

/* PLOCHA PRO VÝBĚR SOUBORU. `display: block` je na ní POVINNÉ, i když to vypadá jako
   samozřejmost: nese ji `<label>` (obsahem smí být jen text, takže uvnitř nejsou `div`y jako
   v návrhu, ale `span`y), a řádkový prvek svislé odsazení do výšky řádku nepromítá — plocha
   pak leží PŘES podnadpis bloku nad sebou a vypadá to jako rozbité vykreslení. Vidět jen
   ze snímku; opraveno 20. 9. 2026 při přepisu kapitoly Dokumenty. */
.onb .drop {
    display: block;
    border: 1px dashed var(--brown-300);
    border-radius: var(--radius-md);
    background: var(--cream-50);
    padding: 26px 20px;
    text-align: center;
    margin-top: 22px;
}

.onb .drop .dh { display: block; font-size: 14.5px; font-weight: 600; color: var(--brown-700); }
.onb .drop .ds { display: block; font-size: 12.5px; color: var(--brown-400); margin-top: 7px; line-height: 1.55; }

/* PŘÍJMY A VÝDAJE VEDLE SEBE (ADR-0138 E5) — dva pruhy pod sebou, popisek vlevo a částka
   vpravo. Do 20. 9. 2026 to byl dělený pruh `.split` s popiskem UVNITŘ barevné plochy; návrh
   v2 má popisek nad pruhem, takže se dá přečíst i u krátké strany. */
.onb .flowb { display: flex; flex-direction: column; gap: 12px; }

.onb .flowl {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 6px; font-size: 13px; color: var(--brown-500);
}

.onb .flown {
    font-family: 'Inter Tight', 'Inter', var(--font-body);
    font-weight: 700; font-size: 14px; color: var(--brown-700); white-space: nowrap;
}

.onb .flowt { height: 12px; border-radius: 999px; background: var(--cream-200); overflow: hidden; }
.onb .flowt i { display: block; height: 100%; border-radius: 999px; }
.onb .flowt i.je-prijem { background: var(--green-700); }
.onb .flowt i.je-vydaj { background: var(--brown-500); }

/* Vysvětlivka pod pruhy (`Callout` z designového systému, tón green). ZELENÁ I U SCHODKU —
   čerpání z majetku je u klienta family office normální stav, ne varování. */
.onb .cal {
    display: flex; gap: 14px; margin-top: 18px;
    background: var(--green-100); border-radius: var(--radius-md); padding: 16px 18px;
}
.onb .cal .calb { width: 4px; border-radius: 2px; background: var(--green-500); flex: 0 0 auto; }
.onb .cal .calt { font-weight: 700; margin-bottom: 3px; color: var(--brown-700); }
.onb .cal .calp { margin: 0; font-size: 14px; line-height: 1.55; color: var(--brown-700); }

.onb .barmini { height: 7px; border-radius: 999px; background: var(--cream-200); overflow: hidden; width: 100%; }
.onb .barmini i { display: block; height: 100%; border-radius: 999px; }

.onb .kv { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; font-size: 13px; }
.onb .kv .k { color: var(--brown-400); }
.onb .kv .v { color: var(--brown-700); font-weight: 600; text-align: right; }

.onb .pband { display: flex; gap: 14px; flex-wrap: wrap; }

.onb .pnode {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: 13px 15px;
    flex: 0 1 250px;
    min-width: 210px;
}

.onb .pav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cream-200);
    color: var(--green-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 auto;
}

.onb .pnm { display: block; font-size: 14px; font-weight: 700; color: var(--brown-700); line-height: 1.2; }
.onb .prl { display: block; font-size: 11.5px; color: var(--brown-400); margin-top: 3px; line-height: 1.35; }

.onb .hero { background: var(--brown-900); color: var(--cream-100); border-radius: var(--radius-lg); padding: 30px 34px; }
.onb .hero .hl { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-400); }

.onb .hero .hh {
    font-family: var(--font-display);
    font-size: 31px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.14;
    margin-top: 12px;
}

/* Čísla v tmavém pruhu (`.heronums`, `.hnum`, `.hml`) a rozpad v kartě (`.rozpad`, `.rh`)
   odešly 20. 9. 2026 s obrazovkou „Poprvé pohromadě" (ADR-0138 E5): návrh v2 ji nemá
   a rozpad se kreslí o obrazovku dřív, v posledním bloku kapitoly Majetek (`.breakdown-body`). */
.onb .karty3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }

.onb .sumgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* ══ ŘÁDEK KAPITOLY (`KapitolaRadek`) ══════════════════════════════════════════════════
   PĚT SLOUPCŮ Z NÁVRHU v2 (`20px minmax(0,1fr) 150px 132px 62px`): kolečko stavu · název ·
   pruh s procentem · tečky se stupněm · „Upravit". Bez pevných šířek se pruh a tečky
   rozjedou podle délky názvu kapitoly a sloupce nedrží svislou linku.

   Do 20. 9. 2026 měl řádek čtyři sloupce (`.sumkap .och`) a ve třetím stál štítek
   „Hotovo · 64 % · Dobrý detail" v jednom kuse. v2 ho rozdělil na pruh a tečky. */
.onb .kaplist .och {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    grid-template-columns: 20px minmax(0, 1fr) 150px 132px 62px;
    gap: 18px;
    padding: 14px 18px;
    align-items: center;
    cursor: default;
}

.onb .kaplist .och:hover { background: var(--white); }
.onb .kapr .ocn { font-size: 14px; }
.onb .kaprn { min-width: 0; }
.onb .kaprb { display: flex; align-items: center; gap: 10px; }
.onb .kaprb .barmini { width: 86px; flex: 0 0 auto; }

.onb .kaprp {
    font: 700 11.5px var(--font-body);
    color: var(--brown-600);
    white-space: nowrap;
}

/* NEZMĚŘENÁ KAPITOLA KRESLÍ POMLČKU, NE NULU (ADR-0139) — a ta pomlčka nesmí vypadat
   jako číslo, jinak se čte jako výsledek měření. */
.onb .kaprp.je-nezmereno { font-weight: 600; color: var(--brown-400); }

.onb .kaprd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 14px;
}

.onb .kaprd .ocm { margin-top: 0; white-space: nowrap; }
.onb .kapru { justify-self: end; }

/* ══ SOUHLAS A ODESLÁNÍ ════════════════════════════════════════════════════════════════
   Souhlas je ZAŠKRTÁVACÍ POLÍČKO VE FORMULÁŘI, ne přepínač na okruhu: obrazovka je
   statická a odesílá se POSTem (ADR-0127). Nativní políčko se schová (pokyn uživatele
   14. 8. 2026: nativní prvek prohlížeče nezůstává ve výchozí podobě) a stav kreslí `.ck`
   přes `:has()` — bez JavaScriptu a bez druhé pravdy o tom, co je zaškrtnuté. */
/* KARTA KOLEM SOUHLASU NENÍ (návrh v2 ji vypíná: `border:0;padding:0;background:transparent`)
   — je to jedna věta se zaškrtnutím uvnitř bílé karty odeslání, ne druhá karta v ní. */
.onb .souhlas {
    position: relative;
    border: 0;
    padding: 0;
    background: transparent;
    min-height: 0;
}

.onb .souhlas:hover { border: 0; background: transparent; }

.onb .souhlas-vstup {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.onb .souhlas:has(.souhlas-vstup:checked) .ck {
    background: var(--green-700);
    border-color: var(--green-700);
}

.onb .souhlas:has(.souhlas-vstup:checked) .ck svg { opacity: 1; }
/* FOKUS JE VIDĚT NA ZAŠKRTÁVÁTKU, ne na celém řádku: nativní políčko je schované, takže
   bez tohohle by klávesnice po stránce chodila naslepo. */
.onb .souhlas:focus-within .ck { border-color: var(--green-500); box-shadow: var(--shadow-focus); }

.onb .odeslani form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
}

.onb .odeslani-akce {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: flex-end;
    flex: 0 0 auto;
}

.onb .odeslani-akce .flh { text-align: right; }

.onb .lnk { font-size: 12.5px; font-weight: 600; color: var(--green-700); cursor: pointer; border: 0; background: transparent; padding: 0; }
.onb .lnk:hover { color: var(--brown-700); }

@media (max-width: 900px) {
    .onb .sumgrid { grid-template-columns: minmax(0, 1fr); }
    .onb .hero { padding: 22px 18px; }

    /* Na úzké obrazovce jdou pruh, tečky i „Upravit" POD název — a všechny do druhého
       sloupce, ne do prvního: `justify-self: end` by jinak odkaz zarovnal na pravý okraj
       dvacetipixelového sloupce s kolečkem, tedy pod fajfku. */
    .onb .kaplist .och { grid-template-columns: 20px minmax(0, 1fr); gap: 6px 12px; }
    .onb .kaprb, .onb .kaprd, .onb .kapru { grid-column: 2; padding-left: 0; }
    .onb .kapru { justify-self: start; margin-top: 4px; }
    .onb .odeslani form { grid-template-columns: minmax(0, 1fr); }
    .onb .odeslani-akce { align-items: stretch; }
    .onb .odeslani-akce .flh { text-align: left; }
}

/* ── drobnosti kroků: souborový vstup, výběr, dvojice tlačítek ───────────────────────────
   SOUBOROVÝ VSTUP SE SCHOVÁVÁ ODSUD, z GLOBÁLNÍHO listu (pokyn uživatele 14. 8. 2026):
   `<InputFile>` je cizí komponenta a její vykreslený `<input>` nenese značku scope hostitele,
   takže by na něj scoped pravidlo nedosáhlo. Bez toho nakreslí prohlížeč anglické
   „Choose File / No file chosen" doprostřed české obrazovky pro klienta. */
.onb .onb-soubor-tlac { cursor: pointer; }
.onb .onb-soubor-input { display: none; }

/* Nativní `<select>` dostane týž kabát jako ostatní pole — bez toho je to jediný prvek
   obrazovky, který si kreslí operační systém po svém. */
.onb .in.sel {
    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='%238a7563' stroke-width='1.6'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

.onb .onb-prio-akce { display: flex; gap: 6px; }
.onb .c .ws { font-size: 13px; color: var(--brown-500); line-height: 1.6; margin-top: 8px; }

/* ČÍSLOVANÉ KROKY „Co bude následovat" (Hotovo, návrh v2). Číslo je v zeleném kolečku,
   text vedle — proto `<ol>` s vlastní značkou, ne `list-style`. */
.onb .nasl {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.onb .nasl li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--brown-600);
}

.onb .nasln {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 11px var(--font-body);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   ODZNAK UKÁZKOVÉHO PORTÁLU — JEDINÉ PRAVIDLO MIMO SCOPE `.onb`.

   Pruh demo režimu (`UkazkaPruh`) se vykresluje v KLIENTSKÉ TVÁŘI (`.mjt`), ne v průvodci —
   právě tam totiž klient kouká na cizí data a musí to poznat. Do `cimpel.css`, kde bydlí
   ostatní stavové odznaky, nepatří: je to sdílený horký soubor. Barva je záměrně JINÁ než
   jantar náhledu klienta (ADR-0037) — dva různé stavy nesmí vypadat stejně.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.stav-odznak-ukazka { background: var(--green-300); color: var(--brown-900); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   ODZNAK „ZPĚT DO PRŮVODCE" — DRUHÉ (a poslední) PRAVIDLO MIMO SCOPE `.onb`.

   Týž důvod jako u odznaku výš: kreslí se v KLIENTSKÉ TVÁŘI (`.mjt`), kde `.onb` není.
   Barva je TŘETÍ — jantar patří náhledu klienta (ADR-0037), zelená ukázkovému portálu.
   Tenhle stav není varování: klient je ve SVÉM portálu a jen má rozdělanou práci jinde,
   takže krémový odznak na tmavé liště, ne výstražná barva.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.stav-odznak-pruvodce { background: var(--cream-200, #e7dbc8); color: var(--brown-900, #2e231a); }

/* ── KAPITOLA JE STRÁNKA (ADR-0138, 19. 9. 2026) ─────────────────────────────────────────
   Návrh Onboarding v2 kreslí celou kapitolu pod sebou: hlavička kapitoly, pak číslované
   bloky. Tečky postupu odešly s kroky — kolikátá kapitola to je, říká nadřádek
   a rail vedle. */
.onb .chhd {
    display: flex; align-items: flex-start; gap: 16px;
    padding-bottom: 18px; border-bottom: 1px solid var(--border-hairline); margin-bottom: 4px;
}
.onb .chhd > div:first-child { flex: 1; min-width: 0; }

/* Blok kapitoly. Odstup nese blok SHORA (`* + *`), ne zdola — dole stojí lišta tlačítek
   a dvojí margin by se ve flexovém sloupci sečetl (týž nález jako u prvku Formulář). */
.onb .blk { padding-top: 26px; }
.onb .blk + .blk { border-top: 1px solid var(--border-hairline); }

.onb .blkt { display: flex; gap: 12px; align-items: baseline; margin-bottom: 16px; }

/* Zelená pilulka s číslem bloku. Kreslí se JEN když jsou bloky aspoň dva — číslo, které
   nemá co odlišit, je ozdoba (rozhoduje o tom `BlokKapitoly.Cislo`, ne CSS). */
.onb .blkn {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: var(--radius-pill); background: var(--green-100);
    font-size: 12px; font-weight: 700; color: var(--green-700);
}
.onb .blkh { display: block; font-size: 17px; font-weight: 600; color: var(--brown-700); }
.onb .blks { display: block; margin-top: 4px; font-size: 13.5px; color: var(--brown-400); line-height: 1.55; }

/* Rail vede na kapitolu ODKAZEM, ne tlačítkem — `.och` je teď `<a>` a potřebuje to, co
   tlačítko mělo od prohlížeče zadarmo. */
.onb a.och { text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   TABULKA ZÁZNAMŮ A DIALOG (ADR-0138 E2, 19. 9. 2026) — návrh Onboarding v2.

   Tabulka je z KNIHOVNY (`.kn-tabulka.je-vzdusna`, ADR-0131) — tady se jí jen říká, co je
   sloupec s číslem a kde stojí akce. Pilulky, nabídka „+ Přidat" a dialog mají čísla z návrhu
   (`.pill.t1–t7`, `.amenu`, `.mdl*`); dialog je nativní `<dialog>` a vlastní třídy `zd*`
   schválně nezačínají na `dlg` — podoba back-office dialogu bydlí v `dialog.css` pod `.mck`
   a sem nedosáhne (hlídá `PodobaDialoguTests`).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── hlavička bloku s tlačítkem ─────────────────────────────────────────────────────── */
.onb .zt { min-width: 0; }
.onb .zth { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.onb .zth .blkt { margin-bottom: 0; flex: 1; min-width: 0; }
.onb .zth .blks { max-width: 62ch; }

.onb .addw { position: relative; flex: 0 0 auto; }
.onb .btn-g.sm { min-height: 40px; font-size: 13.5px; padding: 0 18px; border-radius: var(--radius-pill); }
.onb .btn-g.sm svg { width: 15px; height: 15px; }

/* Nabídka „+ Přidat": stav komponenty (ADR-0138 §5), zavírá se volbou i klikem mimo. */
.onb .zt-catch {
    position: fixed; inset: 0; z-index: 34;
    border: 0; background: transparent; cursor: default; padding: 0;
}
.onb .amenu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 35;
    width: min(330px, 82vw); max-height: 64vh; overflow: auto;
    background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
    box-shadow: 0 16px 34px rgba(46, 35, 26, .17); padding: 8px;
    animation: onb-fadein .14s cubic-bezier(.4, 0, .2, 1);
}
@keyframes onb-fadein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.onb .amenu.grid {
    width: min(580px, 90vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px; padding: 14px 16px;
}
.onb .amenu .gcol { min-width: 0; align-self: start; }
.onb .amenu .ag {
    font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
    color: var(--brown-300); padding: 7px 12px 6px;
}
.onb .amenu.grid .ag {
    margin: 0 0 4px; padding: 0 8px 8px; border-bottom: 1px solid var(--cream-200);
    font: 600 14px/22px var(--font-display); letter-spacing: -.008em; text-transform: none;
    color: var(--brown-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onb .amenu button {
    display: block; width: 100%; text-align: left; border: 0; background: transparent;
    border-radius: var(--radius-sm); padding: 11px 12px; cursor: pointer; font-family: var(--font-body);
}
.onb .amenu.grid button { padding: 7px 8px; }
.onb .amenu button:hover, .onb .amenu button:focus-visible { background: var(--cream-50); }
.onb .amenu .an { display: block; font-size: 14px; font-weight: 500; color: var(--brown-700); line-height: 1.35; }
.onb .amenu.grid .an { font-size: 13.5px; }
.onb .amenu .as { display: block; font-size: 11.5px; color: var(--brown-400); margin-top: 3px; line-height: 1.45; }

/* ── buňky ───────────────────────────────────────────────────────────────────────────── */
.onb .zt .ct { display: block; font-size: 14.5px; font-weight: 500; color: var(--brown-700); line-height: 1.35; }
.onb .zt .cs2 { display: block; font-size: 11.5px; color: var(--brown-400); margin-top: 3px; }
.onb .zt th.zt-n, .onb .zt td.zt-n { text-align: right; }
.onb .zt td.zt-n .ct {
    font-family: 'Inter Tight', 'Inter', var(--font-body); font-weight: 700; font-size: 14.5px; white-space: nowrap;
}
.onb .zt td.zt-p { overflow: visible; }
.onb .zt th.zt-akce, .onb .zt td.zt-akce { width: 1%; white-space: nowrap; text-align: right; }
.onb .zt tr.zt-tot td { background: var(--surface-sunken); font-weight: 700; color: var(--brown-700); }
.onb .zt .empt { margin-top: 0; }
.onb .zt-note { margin-top: 10px; max-width: 70ch; }

.onb .pill {
    display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--radius-pill);
    background: var(--green-100); color: var(--green-700); font: 600 12.5px var(--font-body);
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.onb .pill.t1 { background: var(--green-100); color: var(--green-700); }
.onb .pill.t2 { background: #e4ddf0; color: #584a7a; }
.onb .pill.t3 { background: #f6e2d3; color: #9a5a33; }
.onb .pill.t4 { background: var(--surface-sunken); color: var(--brown-500); }
.onb .pill.t5 { background: #dde8ea; color: #3f6a72; }
.onb .pill.t6 { background: #f3dede; color: #8d4b45; }
.onb .pill.t7 { background: #e8e4d3; color: #6f6a45; }

/* akce v řádku — tužka a koš, potvrzení v řádku */
.onb .act { display: inline-flex; gap: 2px; justify-content: flex-end; }
.onb .ib {
    border: 0; background: transparent; color: var(--brown-300); cursor: pointer; padding: 6px;
    display: inline-flex; border-radius: var(--radius-sm);
}
.onb .ib:hover, .onb .ib:focus-visible { color: var(--brown-700); background: var(--cream-200); }
.onb .ib.dl:hover, .onb .ib.dl:focus-visible { color: #c0472e; background: #f6e6e1; }
.onb .ib svg { width: 15px; height: 15px; }
.onb .zt-potvrd { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--brown-600); white-space: nowrap; }
.onb .zt-potvrd .zt-ano { color: #c0472e; }

/* ── hloubka záznamu: tečky u řádku, pruh pod tabulkou, věta v dialogu (ADR-0139) ────
   Tři stoupající sloupečky z návrhu (`.qd`) — kolik nepovinných údajů záznam nese. Nejsou
   to tlačítka: klientská tvář zůstává statická a upravuje se tužkou vedle (ADR-0067).
   Rozsvícení řídí `HloubkaRadku.TridaStupne`, prahy `HloubkaZaznamu` — v CSS žádné číslo
   o hloubce není, jinak by vznikla druhá sada prahů. */
.onb .qd { display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; flex: 0 0 auto; }
.onb .qd i { display: block; width: 4px; border-radius: 2px; background: var(--cream-200); }
.onb .qd i:nth-child(1) { height: 6px; }
.onb .qd i:nth-child(2) { height: 10px; }
.onb .qd i:nth-child(3) { height: 15px; }
.onb .qd.l1 i:nth-child(1) { background: #c9d977; }
.onb .qd.l2 i:nth-child(1), .onb .qd.l2 i:nth-child(2) { background: #afca0b; }
.onb .qd.l3 i { background: #7f930a; }

/* Sloupec „Detail" je úzký jako sloupec akcí — nese jen tečky. */
.onb .zt th.zt-d, .onb .zt td.zt-d { width: 1%; white-space: nowrap; text-align: right; }

.onb .tdep {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px;
    padding: 10px 14px; background: var(--cream-50);
    border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
}
.onb .tdepl {
    font: 700 10.5px var(--font-body); letter-spacing: .11em; text-transform: uppercase;
    color: var(--brown-600);
}
.onb .tdept { font-size: 11.5px; color: var(--brown-400); }

.onb .dephint {
    display: flex; align-items: center; gap: 9px; margin: 11px 0 0;
    font-size: 11.5px; color: var(--brown-500); line-height: 1.55; text-wrap: pretty;
}

/* ── dialog záznamu ──────────────────────────────────────────────────────────────────── */
.onb dialog.zd {
    border: 0; padding: 0; margin: auto;
    width: min(580px, calc(100vw - 28px)); max-height: 88vh;
    background: var(--white); color: var(--brown-700);
    border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(46, 35, 26, .34);
}
.onb dialog.zd::backdrop { background: rgba(46, 35, 26, .45); }
.onb .zdf { display: flex; flex-direction: column; max-height: 88vh; }
.onb .zdh {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 17px 20px 14px; border-bottom: 1px solid var(--cream-200);
}
.onb .zdt { font-size: 18px; font-weight: 700; color: var(--brown-700); letter-spacing: -.018em; margin-top: 6px; line-height: 1.25; }
.onb .zdx { border: 0; background: transparent; color: var(--brown-300); cursor: pointer; padding: 6px; display: flex; }
.onb .zdx:hover { color: var(--brown-700); }
.onb .zdx svg { width: 17px; height: 17px; }
.onb .zdb { padding: 17px 20px; overflow: auto; }
.onb .zdp {
    display: flex; align-items: center; gap: 14px; padding: 14px 20px 16px;
    border-top: 1px solid var(--cream-200);
}
.onb .zd-mezera { flex: 1; }
.onb .zd-pozn { margin: 14px 0 0; max-width: 60ch; }
.onb .zd .onb-chyba { margin-top: 12px; }

/* kompaktní mřížka polí v dialogu (`.flds.cmp` z návrhu) */
.onb .flds.cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 0; }
.onb .flds.cmp .fl { gap: 6px; }
.onb .flds.cmp .fll { font-size: 12px; }
.onb .flds.cmp .in { height: 38px; font-size: 14px; }
.onb .flds.cmp textarea.in { height: auto; min-height: 62px; font-size: 14px; padding: 10px 12px; }
.onb .flds.cmp .zpole { max-width: none; }
.onb .zd-nepovinne { margin-top: 14px; }
.onb .req { color: #a8741a; font-weight: 700; margin-left: 3px; }

.onb .optt {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 15px;
    border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); background: var(--cream-50);
    color: var(--green-700); font: 600 12.5px var(--font-body); cursor: pointer; padding: 8px 14px;
}
.onb .optt:hover { background: var(--white); border-color: var(--green-300); }
.onb .optt svg { width: 14px; height: 14px; }

/* příloha v patičce dialogu — vlastní český popisek nad schovaným souborovým vstupem */
.onb .attb {
    display: inline-flex; align-items: center; gap: 7px; border: 1px dashed var(--border-hairline);
    background: var(--cream-50); color: var(--brown-600); border-radius: var(--radius-pill);
    font: 600 12px var(--font-body); padding: 7px 13px; cursor: pointer; flex: 0 0 auto;
}
.onb .attb:hover { border-color: var(--green-300); color: var(--green-700); background: var(--white); }
.onb .attb svg { width: 13px; height: 13px; }
.onb .attf {
    display: inline-flex; align-items: center; gap: 7px; background: var(--green-100); color: var(--green-700);
    border-radius: var(--radius-pill); font: 600 12px var(--font-body); padding: 6px 6px 6px 12px;
    flex: 0 0 auto; max-width: 100%;
}
.onb .attf > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.onb .attf button { border: 0; background: transparent; color: var(--green-700); cursor: pointer; display: flex; padding: 3px; border-radius: 50%; }
.onb .attf button:hover { background: rgba(127, 147, 10, .16); }
.onb .attf svg { width: 12px; height: 12px; }

@media (max-width: 640px) {
    .onb .zth { flex-direction: column; align-items: stretch; }
    .onb .amenu, .onb .amenu.grid { right: auto; left: 0; width: min(92vw, 580px); grid-template-columns: 1fr; }
    .onb .flds.cmp { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   SOUHRNNÉ BLOKY KAPITOL (ADR-0138 E5, 20. 9. 2026) — návrh Onboarding v2.

   Tři bloky, které nejsou formulář ani tabulka: „Co už z toho portál umí" (rozpad majetku),
   „Co z toho portál spočítá" (čtyři karty bilance) a „Příjmy a výdaje vedle sebe" (výš).
   Čísla i pravidlo prázdna počítají čisté třídy v Application; tady je jen podoba.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* hlavička karty s přepínačem vpravo */
.onb .c-hh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }

/* přepínač dvou pohledů na TÁŽ čísla (návrh `.seg`) — stav komponenty, ne adresa */
.onb .seg {
    display: inline-flex; background: var(--surface-sunken);
    border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); padding: 3px;
}
.onb .seg button {
    border: 0; background: transparent; font: 600 12px var(--font-body); color: var(--brown-400);
    padding: 7px 13px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
}
.onb .seg button.on { background: var(--white); color: var(--brown-700); box-shadow: var(--shadow-xs); }

.onb .obhint { font-size: 11.5px; margin-top: 8px; }
.onb .obpozn { margin-top: 10px; max-width: 70ch; }

.onb .breakdown-body { display: grid; gap: 18px; margin-top: 14px; }
.onb .obviz { display: flex; justify-content: center; width: 100%; }

/* PRSTENEC: geometrii počítá `DonutGraf` (viewBox 0 0 100 100, střednice 42,8), tloušťku
   řídí CSS. 14,4 je návrhových 34 px stěny v kruhu o průměru 236 px.
   `fill: none` je POVINNÉ — bez něj je z výseče plný koláč (CLAUDE.md, past donutu). */
.onb .obdonut { display: block; max-width: 100%; height: auto; overflow: visible; }
.onb .obdonut .obvys { fill: none; stroke-width: 14.4; }
.onb .obdonut .obstred { pointer-events: none; }
.onb .obdonut .obsv {
    text-anchor: middle; font-family: 'Inter Tight', 'Inter', var(--font-body);
    font-size: 10px; font-weight: 700; fill: var(--brown-700);
}
.onb .obdonut .obsl { text-anchor: middle; font-size: 4.6px; fill: var(--brown-400); }

/* legenda pod prstencem — pilulka nese jen název, číslo je v `title` (návrh `.oleg2`) */
.onb .oleg2 { display: flex; flex-wrap: wrap; gap: 7px 8px; justify-content: center; }
.onb .oleg2 .lc {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
    border-radius: var(--radius-pill); border: 1px solid var(--border-hairline);
    background: var(--white); font-size: 12.5px; color: var(--brown-600);
}
.onb .oleg2 .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.onb .oleg2 .ll { color: var(--brown-600); font-weight: 500; }

/* druhá podoba téhož rozpadu: pruhy měřené proti NEJVĚTŠÍ položce (návrh `bars()`) */
.onb .obbars { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 4px 0; }
.onb .obbar { display: flex; flex-direction: column; gap: 5px; }
.onb .obbl { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--brown-500); }
.onb .obbp { color: var(--brown-400); }
.onb .obbars .barmini { height: 9px; }

/* čtyři karty „Co z toho portál spočítá" */
.onb .kpig { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: stretch; }
.onb .kpi { display: flex; flex-direction: column; padding: 16px 18px; min-width: 0; }
.onb .kpil { min-height: 18px; display: flex; align-items: center; font-size: 12.5px; color: var(--brown-400); }
.onb .kpiv {
    min-height: 40px; display: flex; align-items: center; margin-top: 8px;
    font-family: 'Inter Tight', 'Inter', var(--font-body); font-weight: 700;
    font-size: clamp(18px, 1.7vw, 22px); line-height: 1.05; letter-spacing: -.01em;
    color: var(--brown-700); white-space: nowrap;
}
.onb .kpiv.je-hlavni { font-size: clamp(20px, 2vw, 26px); }
.onb .kpiv.je-dluh { color: #a8402c; }
.onb .kpis { min-height: 20px; margin-top: 9px; font-size: 12px; color: var(--brown-400); }