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

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

.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 ──────────────────────────────────────────────────────────────────────────── */
.onb .btn-g,
.onb .btn-s,
.onb .btn-d,
.onb .add { white-space: nowrap; }

/* PŘIDÁVACÍ TLAČÍTKO Z NÁVRHU, CELÉ. Do 10. 9. 2026 z něj tu byl jen `white-space` ze
   společného řádku výš — nevadilo to, protože ho žádná obrazovka nepoužívala. Jakmile ho
   kroky se záznamy a s položkami použily, bylo vidět, co chybí: bez `svg { width }` kreslí
   prohlížeč ikonu v „přirozené" velikosti, tedy přes půl obrazovky, a text tlačítka vytlačí
   ven. Vidět jen ze snímku — DOM i testy jsou v pořádku.

   POZOR NA TEN SPOLEČNÝ ŘÁDEK VÝŠ: je to SEZNAM selektorů, takže kdo sem doplňuje pravidla
   `.add`, musí je psát do vlastního bloku. Když jsem je 10. 9. 2026 vepsal na místo poslední
   položky seznamu, dostala `width: 100%` i všechna ostatní tlačítka — „Zpět" a „Pokračovat"
   se roztáhly přes celou plochu a lišta kroku se rozpadla na dva řádky pod sebou. */
.onb .add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    border: 1px dashed var(--brown-300);
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--green-700);
    width: 100%;
    white-space: nowrap;
}

.onb .add:hover { border-color: var(--green-500); background: var(--cream-50); }
.onb .add svg { width: 16px; height: 16px; flex: 0 0 auto; }

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

.onb .btn-d {
    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(--brown-700);
    color: var(--cream-100);
    font: 700 14px var(--font-body);
    cursor: pointer;
}

.onb .btn-d:hover { background: var(--brown-900); color: var(--cream-100); }

/* ── štítek stavu ──────────────────────────────────────────────────────────────────────── */
.onb .stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    font: 700 11px var(--font-body);
    white-space: nowrap;
}

.onb .stat.d { background: var(--green-100); color: var(--green-700); }
.onb .stat.w { background: #f8edd8; color: #a8741a; }
.onb .stat.n { background: var(--surface-sunken); color: var(--brown-400); }

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

.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 .chl .r span { color: var(--brown-400); font-size: 11.5px; white-space: nowrap; }

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

/* KARTA PORADCE na uvítání (návrh, karta „Jak je to zabezpečené"). Do 10. 9. 2026 stála
   ve SCOPED listu stránky jako dočasná berlička, protože tenhle soubor držel jiný proud —
   a vedle ní tu ležela druhá, nepoužívaná sada pravidel pro touž věc (`.porad`/`.pj`/`.pr`).
   Dvě sady čísel pro jeden prvek jsou přesně to, čemu se v Alfrédovi vyhýbáme, takže zbyla
   jedna. Scoped list stránky tím zmizel celý.

   Čísla jsou z prototypu. Návrh má na místě monogramu PORTRÉT 38 px; u nás jsou fotky data
   prostředí (ADR-0119) a poradce žádnou nevede — rozměr i kulatost ale zůstávají, ať karta
   drží výšku i tehdy, až fotka přibude. */
.onb .poradce {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cream-200);
    display: flex;
    align-items: center;
    gap: 12px;
}

.onb .poradce-mono {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.onb .poradce-jmeno { font-size: 13px; font-weight: 700; color: var(--brown-700); }
.onb .poradce-role { margin-top: 3px; font-size: 11.5px; color: var(--brown-400); }

/* „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ý pruh „Tohle bude váš portál" ────────────────────────────────────────────────── */
.onb .mkt {
    position: relative;
    overflow: hidden;
    margin-top: 16px;
    background: var(--brown-900);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
    gap: 28px;
    padding: 38px 40px 42px;
    align-items: center;
}

.onb .mktglow {
    position: absolute;
    right: -90px; top: -120px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(175, 202, 11, .16), transparent 68%);
    pointer-events: none;
}

.onb .mktcopy { position: relative; }

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

.onb .mkth {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 29px;
    line-height: 1.16;
    letter-spacing: -.02em;
    color: var(--cream-100);
    margin-top: 14px;
    text-wrap: pretty;
}

.onb .mktb {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-onDark-muted, rgba(244, 239, 228, .68));
    margin-top: 14px;
    max-width: 400px;
    text-wrap: pretty;
}

.onb .mktakce {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.onb .mktakce .demo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    background: var(--green-400);
    color: var(--brown-900);
    font: 600 13.5px var(--font-body);
    letter-spacing: .01em;
    box-shadow: var(--shadow-xs);
}

.onb .mktakce .demo:hover { background: var(--green-600); color: var(--brown-900); }

.onb .mktakce .pozn {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-onDark-muted, rgba(244, 239, 228, .68));
    max-width: 230px;
}

/* ── ilustrace portálu v tmavém pruhu (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 .msts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.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; }
    .onb .mkt { grid-template-columns: minmax(0, 1fr); padding: 26px 20px 30px; gap: 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 .h1.velky { font-size: 36px; }
.onb .wrapc.uzka .h1.velky { font-size: 32px; }
.onb .hsub.velky { max-width: 660px; font-size: 15px; }

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

.onb .drobne { font-size: 12.5px; line-height: 1.55; max-width: 320px; }

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

.onb .sdots { display: flex; gap: 3px; align-items: center; margin: 12px 0 0; min-width: 0; }

.onb .sdots i {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--cream-200);
    flex: 1 1 auto;
    min-width: 5px;
}

.onb .sdots i.d { background: var(--green-500); }
.onb .sdots i.c { background: var(--brown-700); }

.onb .stepw .hd { padding-top: 0; margin-top: 20px; }
.onb .stepw .hd::before { display: none; }
.onb .stepw .h1 { font-size: 26px; }

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

/* ── inventář ──────────────────────────────────────────────────────────────────────────── */
.onb .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.onb .tile {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    text-align: left;
    padding: 14px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--white);
    cursor: pointer;
    min-height: 56px;
}

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

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

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

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

.onb .tilegrp {
    font: 700 10.5px var(--font-body);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brown-300);
    margin: 22px 0 -4px;
}

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

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

@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 (`.pcard`, `.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; }
.onb .item .im { display: block; font-size: 11.5px; color: var(--brown-400); margin-top: 4px; }
.onb .item .iv { font-weight: 700; font-size: 15px; color: var(--brown-700); white-space: nowrap; }

.onb .pcard {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.onb .pcard.open { border-color: var(--green-300); box-shadow: var(--shadow-xs); }

.onb .pch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: center;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 13px 15px;
    min-height: 56px;
    cursor: pointer;
    text-align: left;
}

.onb .pch:hover { background: var(--cream-50); }
.onb .pch.pchv { grid-template-columns: minmax(0, 1fr) auto 18px; }
.onb .pcn { min-width: 0; }
.onb .pch .it { display: block; font-size: 14px; font-weight: 600; color: var(--brown-700); line-height: 1.3; }
.onb .pch .im { display: block; font-size: 11.5px; color: var(--brown-400); margin-top: 3px; }
.onb .pch .iv { display: block; font-weight: 700; font-size: 14px; color: var(--brown-700); white-space: nowrap; }
.onb .pch .chv { color: var(--brown-300); display: flex; }
.onb .pch .chv svg { width: 18px; height: 18px; transition: transform .18s cubic-bezier(.4, 0, .2, 1); }
.onb .pcard.open .pch .chv svg { transform: rotate(180deg); }

.onb .pcb { padding: 4px 15px 15px; border-top: 1px solid var(--cream-200); }

.onb .pcg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 14px;
    margin-top: 13px;
}

.onb .pcg .fl { grid-column: span 1; }
.onb .pcg .fl.wide { grid-column: 1 / -1; }

.onb .pcf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }

.onb .pcf .del {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--brown-400);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    padding: 6px 0;
    min-height: 36px;
}

.onb .pcf .del:hover { color: #c0472e; }
.onb .pcf .del svg { width: 15px; height: 15px; }

.onb .sumbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    margin-top: 18px;
}

.onb .sumbar .sl { font-size: 12px; color: var(--brown-400); display: block; }
.onb .sumbar .sv { font-weight: 700; font-size: 19px; color: var(--brown-700); margin-top: 4px; display: block; }

.onb .bal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.onb .bal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.onb .bal.ok { background: var(--green-100); color: var(--green-700); }
.onb .bal.warn { background: #f8edd8; color: #a8741a; }
.onb .bal.n { background: var(--surface-sunken); color: var(--brown-400); }

.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-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    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 .money { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.onb .money .zpole { max-width: 210px; }

.onb .chkw {
    margin-top: 22px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--white);
    overflow-x: auto;
}

.onb .chkt { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }

.onb .chkt th {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brown-400);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cream-200);
    background: var(--cream-50);
    white-space: nowrap;
}

.onb .chkt th.vl, .onb .chkt td.vl { text-align: right; }
.onb .chkt th.st, .onb .chkt td.st { width: 1%; white-space: nowrap; }
.onb .chkt td { padding: 11px 16px; border-top: 1px solid var(--cream-100); vertical-align: top; }

.onb .chkt tr.grp td {
    padding: 10px 16px;
    background: var(--cream-50);
    border-top: 1px solid var(--cream-200);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brown-600);
    white-space: nowrap;
}

.onb .chkt tr.grp .cc { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--brown-400); margin-left: 10px; }
.onb .chkt tr.grp td.vl { color: var(--brown-700); font-size: 13px; letter-spacing: 0; }
.onb .chkt .rn { font-weight: 600; color: var(--brown-700); line-height: 1.35; }
.onb .chkt .rm { font-size: 11.5px; color: var(--brown-400); margin-top: 3px; }
.onb .chkt td.ow { color: var(--brown-500); font-size: 12.5px; }
.onb .chkt td.vl { color: var(--brown-700); white-space: nowrap; }
.onb .chkt tfoot td { background: var(--brown-900); border-top: 0; padding: 15px 16px; }

.onb .chkt tfoot .rn {
    color: var(--cream-100);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.onb .chkt tfoot .rm { color: var(--text-onDark-muted); }

.onb .chkt tfoot td.vl {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--cream-100);
    vertical-align: middle;
}

.onb .drop {
    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 { font-size: 14.5px; font-weight: 600; color: var(--brown-700); }
.onb .drop .ds { font-size: 12.5px; color: var(--brown-400); margin-top: 7px; line-height: 1.55; }

.onb .split { display: flex; height: 46px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-hairline); }

.onb .split div {
    display: flex;
    align-items: center;
    padding: 0 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
}

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

.onb .hero .hs { font-size: 14px; color: var(--text-onDark-muted); margin-top: 12px; line-height: 1.6; max-width: 620px; }
.onb .hero .hnum { font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.03em; line-height: 1; margin-top: 6px; white-space: nowrap; }
.onb .hero .hml { font-size: 11.5px; color: var(--text-onDark-muted); }
.onb .heronums { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 26px; }
.onb .heroakce { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; align-items: center; }

.onb .karty3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.onb .rozpad { margin-top: 16px; display: flex; flex-direction: column; gap: 13px; }
.onb .rozpad .rh { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--brown-500); }
.onb .rozpad .rh b { font-size: 13px; color: var(--brown-700); }

.onb .sumgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.onb .sumtelo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-top: 16px; align-items: start; }
.onb .sumkap { display: flex; flex-direction: column; gap: 8px; }

/* ŘÁDEK KAPITOLY V SOUHRNU MÁ ČTYŘI SLOUPCE (návrh: `20px minmax(0,1fr) auto auto`) — vedle
   štítku stavu je ještě „Upravit". Bez toho pravidla spadl řádek na dva sloupce z `.och`
   a obojí se zalomilo POD text: štítek i odkaz stály na druhém řádku a seznam vypadal
   rozbitě. Vidět jen ze snímku (průchod prohlížečem 10. 9. 2026) — testům to nevadilo. */
.onb .sumkap .och {
    background: var(--white);
    border: 1px solid var(--border-hairline);
    grid-template-columns: 20px minmax(0, 1fr) auto auto;
    padding: 15px 16px;
    align-items: center;
}
.onb .sumbok { display: flex; flex-direction: column; gap: 16px; }

.onb .souhlas {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

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

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

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

/* ── 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 .pridatdvojice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.onb .onb-prio-akce { display: flex; gap: 6px; }
.onb .onb-siroke { width: 100%; }
.onb .c .ws { font-size: 13px; color: var(--brown-500); line-height: 1.6; margin-top: 8px; }
.onb .onb-hotovo-krok { flex: 1 1 230px; }

.onb .onb-hotovo-nadpis {
    font-size: 14px;
    font-weight: 600;
    color: var(--cream-100);
    margin-top: 8px;
    line-height: 1.4;
}

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