/* ══════════════════════════════════════════════════════════════════════════════════════════
   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í.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ŘÁDKOVÁNÍ 1,55 JE ZÁKLAD CELÉHO PRŮVODCE, jako v návrhu (25. 9. 2026, nález oponenta).
   Návrh ho dědí z `base.css` design systému (`body { line-height: var(--lh-normal) }`),
   kdežto `cimpel.css` dává `body` 1,6 — a do té doby se to dorovnávalo jen po obrazovkách
   (karta portálu, Přehled, Hotovo). Uvítání tím zůstalo na 1,6 a jeho tři karty vyšly
   o 15 px vyšší než v návrhu. Patří to SEM, na kořen tváře, ne na jednotlivé obrazovky. */
.onb {
    font-family: var(--font-body);
    color: var(--brown-600);
    background: var(--cream-100);
    min-height: 100vh;
    line-height: var(--lh-normal);
}

/* ── 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; }

/* Tři stopy jako návrh (`18px minmax(0,1fr) auto`), i když třetí — dřív čas kapitoly — je
   prázdná: její mezera 10 px ubírá názvu místo a bez ní by řádek vyšel o 10 px širší. */
.onb .chl .r {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    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; }

/* NÁZEV KAPITOLY V „CO VÁS ČEKÁ" (návrh `.chl .r span`). Prototyp obaluje interpolaci
   `{{ c.title }}` do `span.sc-interp`, takže na název dopadá TOHLE pravidlo — 11,5 px,
   brown-400, bez zalomení (tak ho ukazuje i snímek `uvitani.png`). Do 20. 9. 2026 tu stálo,
   pak odešlo s časy kapitol, které v tom `span` do té doby bydlely; 25. 9. se vrátilo. */
.onb .chl .r span { color: var(--brown-400); font-size: 11.5px; white-space: nowrap; }

.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č. */
/* Rozměry z návrhu (odkaz `margin-top: 16px`, řádkování 1,55 — změřeno 24. 9. 2026).
   Blokový `summary` se šířkou podle obsahu: řádkový by seděl v řádku rodiče a mezera nad
   odkazem by vyšla o dva pixely větší, než kolik říká `margin-top`. */
.onb .ochrana { margin-top: 16px; }

.onb .ochrana > summary {
    display: block;
    width: fit-content;
    line-height: 1.55;
    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);
    transition: background .16s cubic-bezier(.4, 0, .2, 1);
}

.onb .wallbtn:hover { background: var(--green-600); color: var(--brown-900); }
.onb .wallbtn:active { background: #7f930a; }
.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; }
/* E-mail pod telefonem má v návrhu odstup 2 px, telefon pod jménem 4 px. Bez telefonu
   stojí e-mail rovnou pod jménem, a tam platí těch 4 px. */
.onb .wallpk + .wallpk.je-email { margin-top: 2px; }

/* ══ SVĚTLÁ KARTA „Tohle bude váš portál" ══════════════════════════════════════════════
   Ve v2 nahradila tmavý marketingový pruh (`.mkt`), který tu byl do 20. 9. 2026.
   Odsazení 26/28/28 a řádkování 1,55 jsou z návrhu (změřeno 24. 9. 2026). Karta dřív nesla
   i `c-pad` a pozdější pravidlo téže specificity jí odsazení srazilo na 20/22 — proto ho
   karta nemá a selektor má o třídu víc. */
.onb .c.wportal { margin-top: 16px; padding: 26px 28px 28px; line-height: 1.55; }

.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); }

/* SNÍMEK PORTÁLU VE SVĚTLÉM RÁMEČKU PŘES ŠÍŘKU KARTY (návrh v2, `assets/portal-nahled.png`;
   ADR-0148). Do 24. 9. 2026 tu byla živá kresba ukázkové rodiny v tmavém rámu — kreslila se
   jen s nastaveným demem (na stagingu tedy vůbec) a ukazovala celkový majetek, kdežto portál
   po kliknutí ukáže čisté jmění. Snímek je vidět vždy, i bez dema. */
.onb .wportal-snimek {
    margin-top: 22px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-sm);
}

.onb .wportal-snimek img { display: block; width: 100%; height: 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;
}

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

/* „Pokračovat: Kapitola 7 · Dokumenty a podklady" se na telefonu do jednoho řádku nevejde
   a tlačítko vytlačilo stránku do šířky 493 px (změřeno na 390). Nápis se proto smí zalomit,
   procento vpravo ne. Na desktopu se nic nemění — vejde se. */
.onb .pokrac { white-space: normal; }
.onb .pokrac > span:first-child { min-width: 0; text-align: left; }
.onb .pokrac .meta { white-space: nowrap; }

.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; }
/* Stav kapitoly v railu na JEDEN řádek, zbytek třemi tečkami (návrh `.ocm.ocmd`, drobnost 1).
   Do 25. 9. 2026 se „Hotovo 54 % · Základní detail" zalamoval na dva řádky. Řádkování 1,3
   dá řádek kapitoly 56 px jako v návrhu (tam je stav řádkový prvek s výškou písma). */
.onb .ocm.ocmd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }

/* ── 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);
}

/* HLAVIČKA NA TELEFONU NEPŘETÉKÁ (ADR-0148, 24. 9. 2026). U poradce ve zkušební rodině stojí
   vedle jména pilulka „Zkušební rodina · vyplňujete za klienta" (ADR-0144) a na 390 px
   vytlačila avatar mimo obrazovku (změřeno: šířka stránky 423 px). Jméno s avatarem zůstávají
   v řádku se značkou jako v návrhu a pilulka jde na vlastní řádek pod ně, zarovnaná vpravo.
   `display: contents` z nich dělá položky hlavičky — uvnitř `whoami` by se pilulka musela
   zkrátit, a tři tečky na flexovém prvku nefungují (text se jen uřízne). */
@media (max-width: 640px) {
    .onb .obh { flex-wrap: wrap; row-gap: 8px; }
    .onb .wmo { white-space: nowrap; }
    .onb .whoami { display: contents; }
    .onb .whoami > span:not(.pill):not(.ava) { margin-left: auto; white-space: nowrap; }
    .onb .whoami .pill.je-demo { order: 3; margin-left: auto; max-width: 100%; white-space: normal; }
}

.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;
}

/* Patička rozvržení (`.opaticka`) odešla 25. 9. 2026 (U24): návrh v2 ji v průvodci nemá
   na žádné obrazovce — kontaktní řádek je jen v e-mailu. */

@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; }
    /* Karta „Tohle bude váš portál" drží odsazení 26/28/28 i na telefonu — návrh ho pro
       mobil nepřepisuje (změřeno na 390 px). */
}

/* ── 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; }

/* PŘEHLED A ODESLÁNÍ (U22, drobnost 11) — míry z návrhu v2: sloupec 1000 px, značka → hlavička
   30 px, nadpis 32 px, řádkování 1,55 (token `--lh-normal`; `cimpel.css` ho na `body`
   přebíjí na 1,6 a dlaždice pak vycházely o pixel vyšší). */
.onb .wrapc.prehled { max-width: 1000px; line-height: var(--lh-normal); }
.onb .wrapc.prehled .hd { margin-top: 30px; }
.onb .wrapc.prehled .h1 { font-size: 32px; }
.onb .wrapc.prehled .kapru { line-height: normal; }
.onb .odeslani .ocard .cn { font-size: 13px; font-weight: 600; }

/* Věta o zkušební rodině UVNITŘ sloupce obsahu (Uvítání, Přehled, Hotovo u poradce) —
   ne u okraje stránky jako pod hlavičkou průvodce (drobnost 11). */
.onb .wrapc > .onb-demo-veta { max-width: none; margin: 0 0 14px; padding: 0; }

.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;
}

/* Patka railu z návrhu: 26/18 px a linka `border-hairline` (změřeno 24. 9. 2026). */
.onb .wside-patka {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border-hairline);
}
.onb .wside-patka > .ocm:first-child { font-size: 11.5px; line-height: 1.6; margin-top: 0; }
.onb .wside-patka .wside-veta { margin-top: 0; line-height: 1.5; }

/* „Otevřít demo portál" i během průvodce (ADR-0148). Návrh ho v railu nemá, proto co
   nejtišší: odkaz pod větou, ne druhé tlačítko. */
.onb .wside-demo {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 12px; font-size: 11.5px; text-decoration: none;
}
.onb .wside-demo svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* 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);
    /* Dvouřádkový nápis na střed, jako v návrhu (tam je to <button>, ten centruje sám). */
    text-align: center;
}

.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`: bez rámečku, bílé). */
.onb .pvfull { width: 100%; margin-top: 14px; border: 0; background: var(--white); }

.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;
}

/* Stav ukládání („Průběžně ukládáme", `.sv`) odešel 25. 9. 2026 (U24) — návrh ho v liště
   nemá. Odkaz „Přerušit a pokračovat později" je tlumený, ne zelený (návrh: 500, brown-400). */
.onb .savebar .lnk.odchod {
    font-weight: 500;
    color: var(--brown-400);
    white-space: nowrap;
    line-height: 1.4;
    flex: 0 0 auto;
}

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

/* ── pole formuláře ──────────────────────────────────────────────────────────────────────
   POLE, PILULKY A KARTY JSOU OD 24. 9. 2026 V KNIHOVNĚ (`knihovna.css`, ADR-0149): mřížka
   `MrizkaPoli`, pole `PoleFormulare`, vstup `.kn-vstup`, volby `PilulkyVolby`/`KartyVolby`.
   Tady zůstala jen věta pod polem (`.flh`, píší ji i souhrnné bloky) a karta souhlasu na
   Přehledu a odeslání (`.ocard`), která je formulářem na endpoint, ne volbou na okruhu. */
.onb .flh { font-size: 12px; color: var(--brown-400); line-height: 1.5; }

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

/* Držitelé pod pruhem tříd (návrh: obal s `margin-top: 10px`) — bez odstupu se řádky četly
   jako legenda pruhu. */
.onb .pvdrz { margin-top: 10px; }

.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);
}

/* Rysky a čárka u věty o fixacích mají HOLÉ barvy návrhu (#c9b9a4, #a8917a) — token pro ně
   v systému není a nejbližší (brown-300, brown-400) jsou vidět tmavší (změřeno 26. 9. 2026). */
.onb .dtrack u {
    position: absolute;
    top: -10px;
    width: 1px;
    height: 8px;
    background: #c9b9a4;
    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: #a8917a; flex: 0 0 auto; text-decoration: none; }
.onb .prow.dsep { border-top: 1px solid var(--border-hairline); margin-top: 6px; padding-top: 2px; }

/* ŘÁDEK ZÁVAZKU (návrh `.dname`, U25): barevná tečka před názvem a rok vpravo; bez roku výzva
   v tlumeném řezu (`.miss`). Barvy jsou paleta návrhu `DPAL` — čtyři HOLÉ hodnoty dokola podle
   pořadí závazku (třídu `je-zN` vybírá host), tečka u řádku i značka na ose čtou tutéž. Token
   pro ně v systému není; první je táž cihlová jako pruh poměru dluhu. */
.onb .dname { display: flex; align-items: center; gap: 6px; }
.onb .dname i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.onb .prow b.miss { color: var(--brown-500); font-weight: 500; font-size: 11px; }
.onb .dname i.je-z0, .onb .dtrack i.je-z0 { background: #a8402c; }
.onb .dname i.je-z1, .onb .dtrack i.je-z1 { background: #8a6a3c; }
.onb .dname i.je-z2, .onb .dtrack i.je-z2 { background: #6b7f8c; }
.onb .dname i.je-z3, .onb .dtrack i.je-z3 { background: #7a5c7a; }

/* ── 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;
}

/* HORNÍ KARTA PRŮVODCE NA TELEFONU (návrh v2 `.mtop`, ADR-0155). Nahrazuje schovaný rail:
   prstenec (knihovna, `PrstenecPostupu`) · název kapitoly a „Kapitola N ze M" · odkaz
   „Kapitoly". Čísla jsou z návrhu; na širokém okně karta není (tam totéž říká rail).
   Plovoucí tlačítko portálu je prvek knihovny a schovává se samo (`JenNaTelefonu`). */
.onb .mtop { display: none; }

@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 .mtop {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        background: var(--white);
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-md);
        padding: 10px 12px;
        margin-bottom: 14px;
    }
    .onb .mtop-text { min-width: 0; }
    .onb .mtop .mt1 { font-size: 13px; font-weight: 700; color: var(--brown-700); line-height: 1.25; }
    .onb .mtop .mt2 { font-size: 11px; color: var(--brown-400); margin-top: 3px; }
    /* Návrh má „Kapitoly" jako tlačítko (`line-height: normal`), my jako odkaz na přehled. */
    .onb .mtop .lnk { line-height: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   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 SOUBORY je od 25. 9. 2026 prvek knihovny (`PlochaProSoubory`, `.kn-soubory`
   v `knihovna.css`) — vlastní `.drop` kapitoly Dokumenty odešel i s pravidly (U20). */

/* 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; }

/* ── STROM RODINY (návrh v2 „Vaše rodina v Alfrédovi", U18, ADR-0149 §12) ──────────────────
   Ilustrace se šesti místy a medailony nad ní. Polohy jsou v procentech obrázku a musí sedět
   se skriptem, který z obrázku vyčistil jména ukázkové rodiny (tools/onboarding/strom-rodiny.py).
   Medailon je o něco větší než vyčištěný kroužek v obrázku (11,4 % × ~9 %), takže ho překryje.
   Písmo roste se šířkou stromu (`cqw`), jinak by na telefonu jméno přeteklo kroužek. */
.onb .frodina { padding: 22px 22px 24px; }
.onb .ftree { position: relative; width: 100%; max-width: 520px; margin: 0 auto; container-type: inline-size; }
.onb .ftree > img { display: block; width: 100%; height: auto; }
.onb .fmed {
    position: absolute; width: 11.4%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%; background: var(--cream-50); border: 1.5px solid #a9855c;
    box-shadow: 0 2px 7px rgba(46, 35, 26, .22);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; line-height: 1.15; overflow: hidden; padding: 1%;
}
.onb .fmed b {
    font-size: max(8px, 2.15cqw); font-weight: 700; color: var(--brown-700); display: block;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onb .fmed span {
    font-size: max(7.5px, 1.95cqw); color: var(--brown-500); display: block;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px;
}
.onb .fmed.g2 { border-color: #8a4a34; }
.onb .fmed.g3 { border-color: #c0a06a; }
.onb .ts-r1 { left: 40.2%; top: 88.6%; }
.onb .ts-r2 { left: 60.2%; top: 88.6%; }
.onb .ts-m1 { left: 30.4%; top: 56.6%; }
.onb .ts-m2 { left: 50.3%; top: 56.6%; }
.onb .ts-m3 { left: 70.3%; top: 56.6%; }
.onb .ts-t1 { left: 50.3%; top: 24.5%; }
.onb .flegend {
    display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 16px;
    font-size: 11.5px; color: var(--brown-400);
}
.onb .flegend span { white-space: nowrap; }
.onb .flegend i {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #a9855c;
    background: var(--cream-50); margin-right: 7px; vertical-align: middle;
}
.onb .flegend i.g2 { border-color: #8a4a34; }
.onb .flegend i.g3 { border-color: #c0a06a; }
.onb .blkn { font-size: 11.5px; color: var(--brown-400); margin-top: 11px; line-height: 1.6; max-width: 720px; text-wrap: pretty; }
.onb .fzbytek { text-align: center; margin: 12px auto 0; }

/* ── TABULKY ZÁZNAMŮ PRŮVODCE: rytmus řádku z návrhu v2 (`.mtr`, 24. 9. 2026) ────────────
   Záhlaví 13 px / 500 s odsazením 11 px, řádek 9 px nahoře i dole, 18 px od okraje a mezi
   sloupci 12 px (6 + 6). Vzdušná tabulka knihovny má odsazení 7 × 10,5 px podle návrhu back
   office — průvodce má vlastní, proto je to tady, ne v knihovně. */
.onb .zt .tabulka.je-vzdusna thead th { font-weight: 500; line-height: normal; padding: 11px 6px; }
.onb .zt .tabulka.je-vzdusna tbody td { padding: 9px 6px; }
.onb .zt .tabulka.je-vzdusna th:first-child,
.onb .zt .tabulka.je-vzdusna td:first-child { padding-left: 18px; }
.onb .zt .tabulka.je-vzdusna th:last-child,
.onb .zt .tabulka.je-vzdusna td:last-child { padding-right: 18px; }
/* SOUČET A ZÁHLAVÍ NEJSOU PŘILEPENÉ (návrh v2 `.mtr.tot`, `.mtr.mthd`, 25. 9. 2026) a součet
   má rytmus řádku: 9 px nahoře i dole, čára `border-hairline`. Obecné `.tabulka tfoot td`
   (přilepené, výška 30 px, odsazení 0 × 10 px) patří husté tabulce back office — v průvodci
   dávalo součtový řádek o 11 px nižší než v návrhu. */
.onb .zt .tabulka.je-vzdusna thead th,
.onb .zt .tabulka.je-vzdusna tfoot td { position: static; }
.onb .zt .tabulka.je-vzdusna tfoot td {
    height: auto; padding-top: 9px; padding-bottom: 9px; border-top: 1px solid var(--border-hairline);
}

/* ── TABULKA RODINY: pevné šířky sloupců (návrh v2 `.t-fam`, třída z `TabulkyZaznamu`) ─────
   Jméno 2,6 dílu · Vztah 104 · Narozen 72 · Doplňující 1,2 dílu · Detail 58 · akce 60.
   Do 24. 9. 2026 sloupec Doplňující rostl s poznámkou a vytlačil tečky i tužku za pravý okraj.
   Delší text se zkracuje třemi tečkami; na telefonu tabulka roluje vodorovně (min. 670 px). */
/* Šířky jsou CELÉ BUŇKY (s odsazením), přepočtené z návrhu (756 px tabulky: 18 px okraj,
   12 px mezery mezi sloupci). Jméno bere zbytek; `calc()` s procenty tabulka s pevným
   rozvržením ignoruje, proto Doplňující v procentech (1,2 dílu ≈ 17 %). Selektor je o třídu
   delší než obecné `.onb .zt th.zt-d` (šířka 1 %), jinak by ho přebilo. */
.onb .zt .t-fam table { table-layout: fixed; min-width: 670px; }
.onb .zt .t-fam th:nth-child(2) { width: 116px; }
.onb .zt .t-fam th:nth-child(3) { width: 84px; }
.onb .zt .t-fam th:nth-child(4) { width: 17%; }
.onb .zt .t-fam th.zt-d { width: 70px; }
.onb .zt .t-fam th.zt-akce { width: 84px; }
.onb .zt .t-fam td { overflow: hidden; }
.onb .zt .t-fam td .ct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── TABULKY KAPITOL 2 A 5 (návrh v2 `.t-plan`, `.t-exp`, `.t-inc`, 25. 9. 2026) ─────────
   Týž přepočet jako u rodiny: šířka buňky = šířka sloupce návrhu + 12 px mezery, poslední
   sloupec (tužka a koš) nese i pravý okraj 18 px. První sloupec bere zbytek.
   Plány: Plán minmax(140px, 1,1 dílu) · Kdy podle obsahu (návrh `auto`, v pevném rozvržení
   tabulky proto v procentech) · Částka 132 · Poznámka zbytek · Detail 58 · akce 60. */
.onb .zt .t-plan table,
.onb .zt .t-exp table,
.onb .zt .t-inc table { table-layout: fixed; }
.onb .zt .t-plan table { min-width: 670px; }
.onb .zt .t-plan th:nth-child(1) { width: 23%; }
.onb .zt .t-plan th:nth-child(2) { width: 25%; }
.onb .zt .t-plan th:nth-child(3) { width: 144px; }
.onb .zt .t-plan th.zt-d { width: 70px; }
.onb .zt .t-plan th.zt-akce,
.onb .zt .t-exp th.zt-akce,
.onb .zt .t-inc th.zt-akce { width: 84px; }
.onb .zt .t-exp th:nth-child(2) { width: 92px; }
.onb .zt .t-exp th:nth-child(3) { width: 152px; }
.onb .zt .t-inc th:nth-child(2) { width: 162px; }
.onb .zt .t-plan td,
.onb .zt .t-exp td,
.onb .zt .t-inc td { overflow: hidden; }
.onb .zt .t-plan td .ct,
.onb .zt .t-exp td .ct,
.onb .zt .t-inc td .ct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* NA TELEFONU SE TŘÍSLOUPCOVÉ TABULKY VRACEJÍ K ROZVRŽENÍ PODLE OBSAHU: pevné sloupce
   (92 + 152 + 84 px) by na 358 px nechaly prvnímu sloupci pár pixelů a název výdaje by zmizel
   (vidět jen ze snímku). Plány mají jako rodina min. šířku 670 px a rolují vodorovně. */
@media (max-width: 560px) {
    .onb .zt .t-exp table,
    .onb .zt .t-inc table { table-layout: auto; }
    .onb .zt .t-exp th:nth-child(2),
    .onb .zt .t-exp th:nth-child(3),
    .onb .zt .t-inc th:nth-child(2) { width: auto; }
}

/* ── TABULKY KAPITOL 3 A 4 (návrh v2 `.t-firm`, `.t-ast`, `.t-liab`, 24. 9. 2026, U14/U19) ──
   Týž přepočet jako u rodiny (buňka = sloupec návrhu + 12 px mezery, poslední nese i pravý
   okraj). Změřeno v návrhu při 1440 px (tabulka 756 px):
   Firmy   238 · Forma 104 · Podíl 68 · Hodnota 132 · Detail 58 · akce 60
   Majetek 208 · Typ 104 · Vlastník 90 · Hodnota 140 · Detail 58 · akce 60
   Závazky 178 · Typ 104 · Splátka 120 · Zůstatek 140 · Detail 58 · akce 60
   Do 24. 9. 2026 dlouhý název položky roztáhl tabulku natolik, že sloupec Detail i tužka
   s košem vyjely za pravý okraj (změřeno u Svobodových). Dlouhý text se zkracuje třemi
   tečkami (celý je v dialogu); na telefonu tabulka roluje vodorovně (min. 670 px). */
.onb .zt .t-firm table,
.onb .zt .t-ast table,
.onb .zt .t-liab table { table-layout: fixed; min-width: 670px; }
.onb .zt .t-firm th:nth-child(2),
.onb .zt .t-ast th:nth-child(2),
.onb .zt .t-liab th:nth-child(2) { width: 116px; }
.onb .zt .t-firm th:nth-child(3) { width: 80px; }
.onb .zt .t-firm th:nth-child(4) { width: 144px; }
.onb .zt .t-ast th:nth-child(3) { width: 102px; }
.onb .zt .t-ast th:nth-child(4) { width: 152px; }
.onb .zt .t-liab th:nth-child(3) { width: 132px; }
.onb .zt .t-liab th:nth-child(4) { width: 152px; }
.onb .zt .t-firm th.zt-d,
.onb .zt .t-ast th.zt-d,
.onb .zt .t-liab th.zt-d { width: 70px; }
.onb .zt .t-firm th.zt-akce,
.onb .zt .t-ast th.zt-akce,
.onb .zt .t-liab th.zt-akce { width: 84px; }
.onb .zt .t-firm td,
.onb .zt .t-ast td,
.onb .zt .t-liab td { overflow: hidden; }
.onb .zt .t-firm td .ct, .onb .zt .t-firm td .cs2,
.onb .zt .t-ast td .ct,
.onb .zt .t-liab td .ct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── TABULKA DOKLADŮ (návrh v2 `.t-doc`, U20, 25.–26. 9. 2026) ────────────────────────────
   Soubor 2,4 dílu · Čeho se týká 1,6 dílu · Velikost 84 · Nahráno 96 · akce 60. Šířky jsou
   celé buňky jako u tabulek výš: sloupec návrhu + 12 px mezery (6 + 6), poslední nese i pravý
   okraj 18 px (akce 6 + 60 + 18 = 84). Na telefonu tabulka roluje vodorovně (návrh
   `min-width: 460px`).

   DÍLY SE POČÍTAJÍ ZE ŠÍŘKY TABULKY, NE PROCENTEM. Návrh dělí mezi Soubor a „Čeho se týká"
   jen to, co zbude po pevných sloupcích: z šířky W zbývá W − 36 (okraje) − 48 (čtyři mezery)
   − 240 (84 + 96 + 60) = W − 324, a „Čeho se týká" z toho bere 1,6 / 4. Buňka je tedy
   0,4 · (W − 324) + 12 = 0,4 · W − 117,6 px. Pevné procento (24,5 % do 26. 9. 2026) sedělo jen
   na 756 px: na telefonu (tabulka 460 px) dalo „Čeho se týká" 113 px a názvu souboru 65 —
   návrh má 66 a 106 (změřeno `tools/porovnani-navrhu`, mapa onboarding_c). `calc()` s procenty
   tabulka s pevným rozvržením ignoruje, s délkami ne — proto šířku obalu nese `cqw`
   (obal je kontejner) a `max()` drží spodní mez tabulky 460 px. První sloupec bere zbytek.

   BUŇKY JSOU ODSTUPŇOVANÉ jako v návrhu: název souboru 14,5 / 500, „Čeho se týká" 400
   v brown-500, velikost a čas nahrání 12,5 px v brown-400 s řádkováním buňky návrhu (1,55).

   ŘÁDEK BEZ KOŠE MÁ VÝŠKU ŘÁDKU S KOŠEM (26. 9. 2026). Výpis přiložený u položky koš nemá
   (ADR-0142 §4), takže jeho řádek vycházel o 7,4 px nižší (38,6 × 46 px) a tabulka se
   svisle „drolila" — v návrhu mají koš všechny řádky a jsou stejně vysoké. Výška buňky je
   9 + 27 (koš) + 9 + 1 (linka) a platí i pro poslední řádek, který linku nemá: v návrhu ji
   nese horní okraj řádku, takže i poslední je 46 px.

   ZÁHLAVÍ SE ZKRACUJE TŘEMI TEČKAMI jako v návrhu (`.mtr.mthd span`): na telefonu má
   „Čeho se týká" 54 px a bez zkrácení přetékalo přes „Velikost" (vidět jen ze snímku). */
.onb .zt-doklady { margin-top: 14px; }
.onb .zt .t-doc th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb .zt .t-doc { container-type: inline-size; }
.onb .zt .t-doc table { table-layout: fixed; min-width: 460px; }
.onb .zt .t-doc th:nth-child(2) { width: calc(0.4 * max(100cqw, 460px) - 117.6px); }
.onb .zt .t-doc th:nth-child(3) { width: 96px; }
.onb .zt .t-doc th:nth-child(4) { width: 108px; }
.onb .zt .t-doc th.zt-akce { width: 84px; }
.onb .zt .t-doc td { overflow: hidden; }
.onb .zt .t-doc tbody td { height: 46px; }
.onb .zt .t-doc td .ct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onb .zt .t-doc td:nth-child(2) .ct { font-weight: 400; color: var(--brown-500); }
.onb .zt .t-doc td:nth-child(3) .ct,
.onb .zt .t-doc td:nth-child(4) .ct { font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--brown-400); }

/* „Nic z toho" pod prázdnou tabulkou plánů — řádek pilulek jako u formulářového bloku. */
.onb .zt .zt-nic { margin-top: 10px; }



.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`). */
/* HOTOVO (U23): přes celou šířku jako návrh (bez stropu 1180 px z Uvítání) a s řádkováním
   1,55 z tokenu — `cimpel.css` ho na `body` přebíjí na 1,6. */
.onb .wrapc.hotovo { line-height: var(--lh-normal); }

/* Karty pod pásem: na Hotovo PRÁVĚ DVĚ s mezerou 16 px (návrh v2, U23) — `auto-fit` je
   z nich na desktopu udělá dva sloupce, na telefonu je složí pod sebe. */
.onb .karty3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; 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) {
    /* Dlaždice přehledu ve DVOU sloupcích i na telefonu, jako návrh (`.mob .sumgrid`). */
    .onb .sumgrid { grid-template-columns: minmax(0, 1fr) 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. Dnes ho tak schovává
   jen „Přiložit výpis" v dialogu záznamu; kurzor ruky nese jeho `.attb` (pravidlo
   `.onb-soubor-tlac` odešlo 26. 9. 2026 s vlastní plochou kapitoly Dokumenty). */
.onb .onb-soubor-input { display: none; }

.onb .onb-prio-akce { display: flex; gap: 6px; }

/* PRIORITY PODLE NÁVRHU v2 (24. 9. 2026, U15). Pořadí je samostatný sloupec 34 px s velkým
   šedým číslem (návrh `.num` s inline `font-size:19px; color:#cbbdaa` — barva mezi
   brown-200 a brown-300, v tokenech ji nemáme, a proto doslova), pod názvem je věta a tlačítka
   jsou kompaktní (návrh inline `min-height:34px; padding:0 10px`). Seznam začíná hned pod
   podnadpisem bloku (`margin-top:0`). */
.onb .items.onb-prio { margin-top: 0; }
.onb .onb-prio .item { grid-template-columns: 34px minmax(0, 1fr) auto; }
.onb .onb-prio .num {
    font-family: 'Inter Tight', 'Inter', var(--font-body);
    letter-spacing: -.01em; font-weight: 700; font-size: 19px; color: #cbbdaa;
}
.onb .item .im { display: block; font-size: 11.5px; color: var(--brown-400); margin-top: 4px; }
.onb .onb-prio-akce .btn-s { min-height: 34px; padding: 0 10px; }
.onb .c .ws { font-size: 12.5px; color: var(--brown-500); line-height: 1.6; margin-top: 11px; text-wrap: pretty; }

/* ČÍ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);
    text-wrap: pretty;
}

.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);
}

/* Odznaky „Ukončit ukázku" a „Zpět do průvodce" v levé liště portálu odešly 24. 9. 2026
   (ADR-0148) — nahradila je pilulka v řádku drobečků, a ta bydlí v `majetek.css` (kreslí se
   v klientské tváři `.mjt`, kam `.onb` nesahá). */

/* ── 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.

   ČÍSLA Z NÁVRHU, ZMĚŘENÁ (24. 9. 2026, U21): mezi nadřádkem a H1 je 20 + 8 px (odstup hlavičky
   + horní okraj H1), pod čarou hlavičky 22 px k prvnímu bloku, mezi bloky 26 px NAD čarou
   i 26 px POD ní. Do té doby měl blok jen horní vnitřní odsazení, takže se čára lepila na
   obsah předchozího bloku (změřeno 0 px u všech přechodů v kapitole Cíle). */
.onb .chhd {
    margin-top: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-hairline);
    margin-bottom: 20px;
}
.onb .chhd-radek { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.onb .chhd-text { flex: 1 1 260px; min-width: min(260px, 100%); }

.onb .blk { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--border-hairline); }
.onb .chhd + .blk { margin-top: 22px; padding-top: 0; border-top: 0; }

/* Hlavička bloku (`HlavickaBloku`): číslo V ŘÁDKU nadpisu jako zelená pilulka, podnadpis pod
   ním od levého okraje, vpravo akce (u tabulky „+ Přidat"), která se na úzké obrazovce zalomí
   pod nadpis. Číslo se kreslí jen u víc bloků — rozhoduje `BlokKapitoly.Cislo`, ne CSS. */
.onb .blkh {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.onb .blkhl { min-width: 0; }
.onb .blkt {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.014em;
    color: var(--brown-700);
    text-wrap: pretty;
}
.onb .blkt b {
    display: inline-block;
    margin-right: 10px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--green-100);
    font-family: var(--font-cisla);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--green-700);
    vertical-align: 2px;
}
.onb .blks {
    margin-top: 5px;
    max-width: 580px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--brown-400);
    text-wrap: pretty;
}

/* 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`).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── tlačítko „+ Přidat" v hlavičce bloku ───────────────────────────────────────────── */
.onb .zt { min-width: 0; }

.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; }
/* Nadpis skupiny nabídky BEZ verzálek (návrh v2 `.amenu .ag`, 24. 9. 2026). */
.onb .amenu .ag {
    font: 600 11px var(--font-body); letter-spacing: .06em;
    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;
}
/* Tlumený text ve sloupci čísel („z výpisu") — návrh v2 `.mtr .n.soft .ct`. */
.onb .zt td.zt-n.soft .ct { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--brown-400); }
.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; }

/* DEMO RODINA / VYPLŇUJETE ZA KLIENTA (ADR-0144). Vidět být musí — ale KLIDNĚ: je to sdělení
   o povaze dat, ne výtka (pokyn uživatele 22. 9. 2026). Barvy z palety průvodce, ne nové. */
.onb .pill.je-demo { background: #f0ebdb; color: #6f6a45; }

/* Věta o nočním obnovení. Jeden řádek pod hlavičkou, tlumeně — text, ne barevný blok. */
.onb .onb-demo-veta {
    max-width: 1180px; margin: 0 auto; padding: 8px 24px 0;
    font-size: 12.5px; color: var(--muted, #8a8570);
}


/* 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; }

/* POTVRZENÍ ODEBRÁNÍ SE DO SLOUPCE AKCÍ NEVEJDE — A OŘÍZNOUT SE NESMÍ (26. 9. 2026, nález
   oponentů u kapitoly 7). Tabulky s pevným rozvržením (`t-fam`, `t-plan`, `t-exp`, `t-inc`,
   `t-firm`, `t-ast`, `t-liab`, `t-doc`) mají sloupec akcí 84 px, tedy 60 px obsahu, a jejich
   buňky ořezávají přetok (tři tečky u dlouhých názvů). „Odebrat? Ano Ne" má 116 px: z „Ano"
   zbylo „An" a „Ne" nebylo vidět ani nešlo kliknout (`elementFromPoint` vracel plochu stránky),
   takže rozdělané odebrání šlo zrušit jen obnovením stránky — jediná viditelná volba byla ta
   destruktivní.

   JEDNO PRAVIDLO PRO VŠECHNY TABULKY PRŮVODCE. Řídí se tím, že v buňce akcí potvrzení JE
   (`:has`), ne třídou tabulky, takže ho dostane i tabulka, která přibude. Specifičnost
   (4 třídy + prvek) přebije pravidla tabulek `.onb .zt .t-… td { overflow: hidden }`
   (3 třídy + prvek) — hlídá `PotvrzeniOdebraniTests`.
   - Buňka přestane ořezávat a potvrzení se opře o PRAVÝ okraj obsahu (tam, kde byl koš):
     jako plovoucí prvek širší než buňka přečnívá DOLEVA. Za pravý okraj tabulky nesmí —
     obal tabulky roluje vodorovně a tam by ho uřízl znovu (na telefonu).
   - `position: relative` ho zvedne nad sousední buňku, takže i klik na „Ano"/„Ne" patří jemu.
   - Obsah SOUSEDNÍ buňky se po dobu potvrzení schová: potvrzení přes ni leží (u dokladů přes
     „Nahráno", u majetku přes tečky Detailu) a text pod textem by se četl jako rozbité
     vykreslení. Schovává se obsah, ne buňka — linka řádku zůstává.
   - Výška tužky a koše (`.ib`: 6 + 15 + 6), jinak řádek během potvrzení poskočí (46 → 42 px).
   Šířky sloupců se nemění: mimo potvrzení zůstává rozvržení tabulky 1:1 s návrhem. */
.onb .zt td.zt-akce:has(> .zt-potvrd) { overflow: visible; }
.onb .zt td.zt-akce > .zt-potvrd { float: right; position: relative; min-height: 27px; }
.onb .zt tr:has(> td.zt-akce > .zt-potvrd) > td:nth-last-child(2) > * { visibility: hidden; }

/* ── 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; }
/* TEČKY JAKO TLAČÍTKO (návrh v2 `button.qd`, 24. 9. 2026) — otevřou úpravu s rozbalenými
   nepovinnými údaji. Vzhled se nemění, jen kurzor a ztmavnutí při najetí. */
.onb button.qd { border: 0; background: transparent; padding: 0; cursor: pointer; }
.onb button.qd:hover i, .onb button.qd:focus-visible i { background: #93a909; }
.onb button.qd:focus-visible { outline: 2px solid var(--green-300); outline-offset: 3px; border-radius: 2px; }
.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 ──────────────────────────────────────────────────────────────────── */
/* `max-width: none` (25. 9. 2026, změřeno na telefonu): prohlížeč dává modálnímu <dialog>
   vlastní strop `calc(100% - 6px - 2em)`, takže na 390 px měl dialog 352 px místo 362
   z návrhu (`min(580px, 100vw − 28px)`) a každé pole o 10 px méně. */
.onb dialog.zd {
    border: 0; padding: 0; margin: auto;
    width: min(580px, calc(100vw - 28px)); max-width: none; max-height: 88vh;
    /* Text dialogu dědí barvu jádra značky (brown-600) jako v návrhu (`.mdl` pod `.ob`). */
    background: var(--white); color: var(--brown-600);
    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; }

/* NEDOSTUPNÉ ULOŽENÍ je v návrhu v2 TÉŽ zelené tlačítko, jen průsvitné (`.btn-g.off`,
   `opacity: .42`, 25. 9. 2026) — ne krémové s hnědým textem, které má zbytek průvodce.
   Návrh ho má jen tady, proto jen tady; najetí myší ho neztmaví (nic se nestane). Odkaz
   „Zrušit" má v patičce řádkování prohlížeče (změřeno 15 px), ne 1,55 z formuláře. */
.onb .zdp .btn-g:disabled,
.onb .zdp .btn-g:disabled:hover {
    background: var(--green-500); color: var(--brown-700); opacity: .42; cursor: not-allowed;
}
.onb .zdp .lnk { line-height: normal; }

/* NA TELEFONU JDE PŘÍLOHA NA VLASTNÍ ŘÁDEK (25. 9. 2026, změřeno na 390 px): „Přiložit výpis",
   „Zrušit" a „Přidat do tabulky" potřebují 389 px a dialog jich má 362 — tlačítko přetékalo
   o 7 px přes okraj dialogu. Návrh se na 390 px vejde jen díky užšímu písmu (Inter jako
   kolekce .ttc kreslí tučný řez obyčejným), takže podobu z návrhu tu přesně zopakovat nejde.
   Mezera (`.zd-mezera`) se na telefonu stane zlomem řádku: příloha vlevo nahoře, Zrušit
   a uložení pod ní vpravo. Dialog bez přílohy se vejde na jeden řádek a nemění se. */
@media (max-width: 440px) {
    .onb .zdp:has(> .attb, > .attf) { flex-wrap: wrap; row-gap: 0; }
    .onb .zdp:has(> .attb, > .attf) > .zd-mezera { flex: 1 0 100%; height: 0; }
    .onb .zdp:has(> .attb, > .attf) > .lnk { margin-left: auto; }
    .onb .zdp:has(> .attb, > .attf) > .lnk,
    .onb .zdp:has(> .attb, > .attf) > .btn-g { margin-top: 12px; }
}
.onb .zd .onb-chyba { margin-top: 12px; }

/* Kompaktní mřížka polí dialogu je z knihovny (`MrizkaPoli`, ADR-0149) — tady jen odstup
   nepovinných polí od tlačítka „Doplnit detail". */
.onb .zd-nepovinne { margin-top: 14px; }

.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 .amenu, .onb .amenu.grid { right: auto; left: 0; width: min(92vw, 580px); 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); }