/* =========================================================================
   Kalkulačka superdávky — samostatná aplikace
   =========================================================================
   ⚠️ Tenhle soubor je ZÁMĚRNĚ nezávislý na `filantrophia.css`.
   Kalkulačka běží ve vlastním dokumentu uvnitř iframe, takže na ni styly
   webu nedosáhnou — a nemá je ani dědit. Nepřidávat sem nic, co by se
   odsud odkazovalo do designu webu; při změně palety webu se tohle
   nemění.

   Barvy jsou ze zadání (25. 9. 2026), ne odhadnuté.
   ⚠️ Kontrast: žlutá `--zluta` je výplň s TMAVÝM textem (#151a3d na #ffc83d
   je 10,4:1). Jako barva písma na tmavém podkladu taky projde (9,8:1),
   proto smí být i v odkazech a v paragrafu v nápovědě. Vedlejší text
   `--text-2` na `--telo` má 6,2:1.
   ========================================================================= */

/* --- Písma ---------------------------------------------------------------
   Hostujeme sama, ne přes Google Fonts. Projekt to má jako pravidlo kvůli
   PageSpeed (Google posílal 4× tentýž soubor). Montserrat je *variabilní*,
   takže jeden soubor pokrývá řezy 400–800. */
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-latin.311d352d9323.woff2") format("woff2");
    font-weight: 400 800; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}
/* ⚠️ Čeština potřebuje latin-ext (ě š č ř ž ů ď ť ň). Bez něj se háčky
   berou z náhradního písma a nadpis se rozsype. */
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-latinext.d16dfe26bcd7.woff2") format("woff2");
    font-weight: 400 800; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --telo: #151a3d;        /* tělo kalkulačky */
    --panel: #1e2450;       /* pole a panely */
    --linka: #3a4378;
    --displej: #e9ecff;
    --zluta: #ffc83d;
    --zluta-tmava: #e8ae1e; /* jen hover, nikdy pod text */
    --text: #eef0ff;
    --text-2: #a9b0d9;
    --papir: #fdfdfb;       /* účtenka */
    --inkoust: #151a3d;

    /* Odvozené barvy — ve vzhledu „Den" se přepisují (viz níž). */
    --tlumena: #2b3266;     /* neaktivní kroky, odznak osoby, podklad při najetí */
    --akcent: var(--zluta); /* okraj vybrané volby, fokus, hotový krok */
    --akcent-text: var(--zluta);
    --panel-linka: transparent;  /* okraj sbalené osoby */
    --pata-linka: rgba(58, 67, 120, .5);
    --fokus: var(--displej);
    --chyba-pozadi: rgba(255, 138, 138, .12);
    --chyba-linka: #ff8a8a;
    --chyba-text: #ffc9c9;
    --pozadi: #0d1130;      /* samostatná adresa, za kartou */
    --napoveda-pozadi: rgba(233, 236, 255, .07);  /* rozbalený výklad „?" */

    --r: 14px;              /* poloměr zaoblení polí */
    --r-karta: 22px;
    --dotyk: 44px;          /* nejmenší dotyková plocha ze zadání */
}

/* --- Vzhled „Den" ----------------------------------------------------------
   Přepínač Den / Noc je pod displejem a nasazuje třídu `den` na <html>.
   Vznikl 12. 10. 2026 na podnět zakladatele: na notebooku tmavé plochy
   splývaly a nebylo poznat, který rámeček je co. Výchozí zůstává tmavý
   vzhled ze zadání.
   ⚠️ Žlutá tu zůstává jen jako VÝPLŇ s tmavým textem (10,9:1). Jako okraj
   nebo písmo na bílé má 1,5:1, proto `--akcent` (3,6:1 na panelu)
   a `--akcent-text` (5,1:1). `--linka` 3,3:1, `--text-2` 6,7:1.
   Spočítáno, ne odhadnuto.
   ⚠️ `color-scheme` se schválně nenastavuje: když se v iframu liší od
   stránky pod ním, Chrome rámu namaluje neprůhledné pozadí a karta přijde
   o zaoblené rohy. */
:root.den {
    --telo: #ffffff;
    --panel: #f2f4fb;
    --linka: #7c84b8;
    --text: #151a3d;
    --text-2: #4b5288;
    --tlumena: #dde1f2;
    --akcent: #a87700;
    --akcent-text: #8a5f00;
    --panel-linka: #d3d8ee;
    --pata-linka: #dde1f2;
    --fokus: #151a3d;
    --chyba-pozadi: #fdeced;
    --chyba-linka: #c62828;
    --chyba-text: #a11d1d;
    --pozadi: #e9ecf5;
    --napoveda-pozadi: rgba(255, 200, 61, .16);
}
/* Šipka selectu je obrázek — barvu z proměnné nevezme. */
.den .vyber {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151a3d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* Světlý displej a bílá účtenka by na bílém těle splynuly. */
@media screen {
    .den .displej, .den .uctenka { box-shadow: inset 0 0 0 1px #c9cfee; }
}

/* --- Přepínač Den / Noc ---------------------------------------------------
   V řádku s krokem, ne v hlavičce: na mobilu je hlavička plná (zpět,
   název, zavřít) a název by se nevešel. */
.kroky__radek {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin: 0 0 4px;
}
.kroky__radek .kroky__popis { margin: 0; }
.vzhled {
    display: inline-flex; flex: 0 0 auto;
    padding: 2px;
    border: 1px solid var(--linka);
    border-radius: 999px;
}
.vzhled__volba {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 30px;
    padding: 4px 10px;
    background: transparent;
    border: 0; border-radius: 999px;
    color: var(--text-2);
    font: inherit; font-size: 0.8rem; font-weight: 700;
    cursor: pointer;
}
.vzhled__volba svg { width: 14px; height: 14px; flex: 0 0 auto; }
.vzhled__volba[aria-pressed="true"] { background: var(--zluta); color: var(--inkoust); }
.vzhled__volba:hover:not([aria-pressed="true"]) { color: var(--text); }
.vzhled__volba:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }

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

/* ⚠️⚠️ ATRIBUT `hidden` MUSÍ VYHRÁT NAD `display` Z TŘÍDY.
   Prohlížeč dává `[hidden] { display: none }` ve svém vlastním stylu, který
   má nižší váhu než cokoli autorského — takže `.uctenka { display: flex }`
   ho přebije a schovaný prvek je vidět. Stálo to čas už dvakrát: jednou
   u nápověd staré kalkulačky (plavaly přes tlačítka), podruhé tady, kde se
   účtenka s výsledkem zobrazovala rovnou pod první otázkou.
   Tahle jedna řádka to řeší pro celý dokument. Nemazat. */
[hidden] { display: none !important; }

html, body {
    margin: 0; padding: 0;
    height: 100%;
    background: transparent;   /* v iframe prosvítá ztmavený web */
}
body {
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Čísla — Montserrat se stejně širokými číslicemi (tabular-nums).
   ⚠️ Do 26. 9. 2026 tu bylo DM Mono. Mělo přeškrtnutou nulu („Ø") a v poli
   „18 000" vypadaly nuly jinak než ostatní číslice — výtka z kola 2, bod 6.
   Tabulkové číslice drží sloupce částek zarovnané i bez neproporcionálního
   písma. */
.mono { font-family: inherit; font-variant-numeric: tabular-nums; }

/* Text jen pro odečítače. `clip-path` místo `display: none` — schovaný
   text odečítač nepřečte. */
.vis-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   Karta
   ========================================================================= */
.app {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 440px;
    max-height: 720px;
    margin: 0 auto;
    background: var(--telo);
    border-radius: var(--r-karta);
    overflow: hidden;         /* zaoblení karty; nápověda je uvnitř, neořeže se */
}

/* Samostatná adresa (ne v iframe) — karta stojí uprostřed na tmavém pozadí. */
body.samostatne { background: var(--pozadi); display: grid; place-items: center; padding: 24px; }
body.samostatne .app { height: min(720px, calc(100vh - 48px)); box-shadow: 0 30px 80px rgba(0,0,0,.5); }

/* --- Hlavička ------------------------------------------------------------ */
.app__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
}
.app__znacka { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app__nazev {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.app__slunce { flex: 0 0 auto; width: 26px; height: 26px; display: block; }

/* Kolečka v hlavičce (zavřít, zpět na mobilu). */
.app__kolecko {
    flex: 0 0 auto;
    width: var(--dotyk); height: var(--dotyk);
    display: grid; place-items: center;
    padding: 0;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--linka);
    border-radius: 50%;
    cursor: pointer;
}
.app__kolecko:hover { background: var(--panel); }
.app__zavrit { margin-left: auto; }
.app__zpet-mobil { display: none; }

/* --- Displej -------------------------------------------------------------
   Světlý panel s živým odhadem. Přepočítává se po každé odpovědi. */
.app__vrch { flex: 0 0 auto; padding: 0 20px; }

.displej {
    position: relative;
    /* ⚠️ Pojistka proti vodorovnému přetečení. Displej je pevný panel,
       nic z něj vyjet nesmí — jinak se roztáhne celý dokument a karta
       se na úzké obrazovce ořízne zprava. */
    overflow: hidden;
    background: var(--displej);
    color: var(--inkoust);
    border-radius: 18px;
    padding: 16px 20px 14px;
}
.displej__hlava {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.displej__titulek {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4b5288;
}
.displej__znacka {
    font-size: 0.72rem; font-weight: 700;
    background: var(--zluta); color: var(--inkoust);
    padding: 4px 10px; border-radius: 999px;
    opacity: 0; transition: opacity .18s;
}
.displej__znacka.je-videt { opacity: 1; }

.displej__cislo {
    display: flex; align-items: baseline; justify-content: flex-end;
    flex: 0 0 auto; white-space: nowrap;
    gap: 6px;
    margin: 6px 0 0;
    min-height: 54px;
}
.displej__priblizne { font-size: 1.6rem; color: #6b73aa; }
.displej__castka {
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.displej__mena { font-size: 1.15rem; font-weight: 700; }
.displej__pod {
    margin: 2px 0 0;
    text-align: right;
    font-size: 0.85rem;
    color: #5b6398;
}

/* --- Ukazatel kroků ------------------------------------------------------ */
.kroky { display: flex; gap: 8px; margin: 16px 0 8px; }
.kroky span {
    flex: 1 1 0;
    height: 5px;
    background: var(--tlumena);
    border-radius: 999px;
}
.kroky span.je-hotovy { background: var(--akcent); }
.kroky__popis { margin: 0 0 4px; font-size: 0.92rem; color: var(--text-2); }

/* --- Posuvná část s otázkou ---------------------------------------------- */
.app__telo {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;            /* ⚠️ bez toho flex položka nescrolluje */
    overflow-y: auto;
    /* ⚠️ Prolnutí nahoře a dole má záporné okraje, aby sahalo přes celé
       odsazení. Na mobilu je odsazení menší (14 px) a vznikl vodorovný
       posuvník. `overflow-x: hidden` to utne. */
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 8px 20px 20px;
}
.app__telo::-webkit-scrollbar { width: 8px; }
.app__telo::-webkit-scrollbar-thumb { background: var(--tlumena); border-radius: 999px; }

.otazka {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
}
.otazka .napoveda__spinac { vertical-align: middle; }
.podotazka { margin: 0 0 18px; color: var(--text-2); font-size: 0.97rem; }

.pole { margin: 0 0 16px; }
.pole__popis {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 0.97rem;
}

/* --- Vstupy --------------------------------------------------------------
   ⚠️ Všechno vlastní. `appearance: none` je nutné i u selectu, jinak Windows
   vykreslí systémovou šipku a pole vypadá jako cizí prvek. */
.vstup, .vyber {
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    background: var(--panel);
    border: 1.5px solid var(--linka);
    border-radius: var(--r);
    appearance: none;
    -webkit-appearance: none;
}
.vstup:focus-visible, .vyber:focus-visible {
    outline: none;
    border-color: var(--akcent);
    box-shadow: 0 0 0 3px rgba(255, 200, 61, .25);
}
.vyber {
    padding-right: 48px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef0ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
}
.vyber option { background: var(--panel); color: var(--text); }
.vyber optgroup { background: var(--telo); color: var(--text-2); }

/* Částka: „Kč" napevno na konci pole. Je to popisek, ne text v inputu —
   kdyby byl v hodnotě, musel by se při čtení odstraňovat. */
.castka { position: relative; display: block; }
.castka .vstup {
    padding-right: 58px;
    font-family: inherit; font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
}
.castka__mena {
    position: absolute;
    right: 16px; top: 50%; transform: translateY(-50%);
    font-weight: 700;
    pointer-events: none;
}
/* Šipky u number inputu pryč — mění hodnotu omylem při scrollu. */
.vstup[type="number"]::-webkit-outer-spin-button,
.vstup[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vstup[type="number"] { -moz-appearance: textfield; }

/* --- Volby (bydlení) ----------------------------------------------------- */
.volba {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    min-height: 68px;
    margin: 0 0 10px;
    padding: 12px 16px;
    text-align: left;
    background: var(--panel);
    border: 1.5px solid var(--linka);
    border-radius: var(--r);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.volba.je-vybrana { border-color: var(--akcent); }
.volba__kolecko {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border: 2px solid var(--linka);
    border-radius: 50%;
    display: grid; place-items: center;
}
.volba.je-vybrana .volba__kolecko { border-color: var(--akcent); }
.volba.je-vybrana .volba__kolecko::after {
    content: ""; width: 12px; height: 12px;
    background: var(--akcent); border-radius: 50%;
}
.volba__nazev { font-weight: 700; display: block; }
.volba__pod { display: block; font-size: 0.87rem; color: var(--text-2); }

/* --- Osoby v domácnosti --------------------------------------------------
   Sbalený řádek („Vy · 35 let · pracuje" + tužka) se rozbalí k úpravě.
   Rozbalená je vždy nejvýš jedna — jinak je krok nepřehledně dlouhý. */
.osoba { margin: 0 0 10px; }

.osoba__radek {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    min-height: 72px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1.5px solid var(--panel-linka);
    border-radius: var(--r);
    color: var(--text);
    font: inherit; text-align: left;
    cursor: pointer;
}
.osoba__radek:hover { border-color: var(--linka); }
.osoba__odznak {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--tlumena);
    font-size: 0.9rem; font-weight: 700;
}
.osoba__text { flex: 1 1 auto; min-width: 0; }
/* ⚠️ `display: block` je nutné — jsou to <span>, takže by se jinak
   slily do jednoho řádku („35 letnepracuje"). */
.osoba__hlavni { display: block; font-weight: 700; }
.osoba__vedlejsi { display: block; font-size: 0.9rem; color: var(--text-2); }
.osoba__tuzka { flex: 0 0 auto; width: 22px; height: 22px; color: var(--text-2); }

.osoba__detail {
    padding: 16px;
    background: var(--panel);
    border: 2px solid var(--akcent);
    border-radius: var(--r);
}
.osoba__hlava {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 16px;
}
.osoba__hlava .osoba__odznak { background: var(--zluta); color: var(--inkoust); }
.osoba__titulek { flex: 1 1 auto; margin: 0; font-size: 1.05rem; font-weight: 700; }
.osoba__smazat {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 50%;
    color: var(--text); cursor: pointer;
}
.osoba__smazat:hover { background: var(--tlumena); }

.vek { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.vek__popis { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.97rem; }
.vek__obal { position: relative; }
.vek__obal .vstup {
    width: 150px;
    padding-right: 52px;
    font-family: inherit; font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
}
.vek__jednotka {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: var(--text-2); pointer-events: none;
}

/* Situace osoby — klikací štítky, ne zaškrtávátka (ze zadání). */
.stitky { display: flex; flex-wrap: wrap; gap: 10px; }
.stitek {
    min-height: var(--dotyk);
    padding: 10px 18px;
    background: transparent;
    border: 1.5px solid var(--linka);
    border-radius: 999px;
    color: var(--text);
    font: inherit; font-weight: 600;
    cursor: pointer;
}
.stitek:hover { border-color: var(--text-2); }
.stitek.je-vybrany {
    background: var(--zluta);
    border-color: var(--akcent);
    color: var(--inkoust);
    font-weight: 700;
}
.stitek__fajfka { display: none; margin-right: 6px; }
.stitek.je-vybrany .stitek__fajfka { display: inline; }

.pridat {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%;
    min-height: 62px;
    background: transparent;
    border: 2px dashed var(--linka);
    border-radius: var(--r);
    color: var(--akcent-text);
    font: inherit; font-weight: 700; font-size: 1.02rem;
    cursor: pointer;
}
.pridat:hover { border-color: var(--akcent); }

/* --- Nápověda „?" --------------------------------------------------------
   ⚠️⚠️ Výklad se rozbaluje V TEXTU pod popiskem a odsune zbytek kroku
   níž — žádná plovoucí bublina (proč, viz `kalkulacka.js`, „Nápověda").
   Skript panel při otevření přestěhuje z popisku hned za něj.
   `hidden` drží globální `[hidden] { display: none !important }`. */
.napoveda { display: inline-flex; vertical-align: middle; }
.napoveda__spinac {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--linka);
    border-radius: 50%;
    color: var(--text-2);
    font: inherit; font-size: 0.85rem; font-weight: 700;
    cursor: pointer;
    flex: 0 0 auto;
}
.napoveda__spinac:hover { border-color: var(--text-2); color: var(--text); }
.napoveda__spinac[aria-expanded="true"] {
    background: var(--zluta);
    border-color: var(--akcent);
    color: var(--inkoust);
}

/* Žlutá linka vlevo patří k žlutému otazníku nad ní — je poznat, k čemu
   výklad patří, i když jich je otevřených víc. Pozadí je průsvitné, takže
   sedí na těle karty i v rámečku osoby. */
.napoveda__panel {
    position: relative;       /* kotva pro křížek */
    display: block;
    margin: 0 0 14px;
    padding: 12px 14px 12px 16px;
    background: var(--napoveda-pozadi);
    border-left: 3px solid var(--akcent);
    border-radius: 0 10px 10px 0;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-align: left;
    line-height: 1.45;
}
/* Skrytý popisek (osoba do 15 let nemá „Co platí?") schová i svůj výklad. */
[hidden] + .napoveda__panel { display: none !important; }
/* Místo pro křížek vpravo nahoře, ať přes něj první řádek nejede. */
.napoveda__panel > :first-child { margin-right: 36px; }
.napoveda__paragraf {
    display: block;
    margin: 0 0 6px;
    font-family: inherit; font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    color: var(--akcent-text);
    line-height: 1.35;
}
.napoveda__text { display: block; font-size: 0.93rem; color: var(--text); }
.napoveda__zavrit {
    position: absolute;
    top: 6px; right: 6px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    padding: 0;
    background: transparent; border: 0; border-radius: 6px;
    color: var(--text-2);
    cursor: pointer;
}
.napoveda__zavrit:hover { color: var(--text); background: var(--tlumena); }

/* Tlačítka, popisky a nadpisy nejdou označit jako text. Na touchpadu se
   snadno „táhne" místo kliku a modře podbarvené „Vy", „Věk" a otazník
   (snímek zakladatele 12. 10. 2026) vypadaly jako porucha. Popisky
   neobalují pole, takže psaní do polí to nijak neomezí; text nápovědy
   označit jde dál. */
.app button, .app label, .otazka, .osoba__hlava { -webkit-user-select: none; user-select: none; }
.napoveda__panel { -webkit-user-select: text; user-select: text; }

/* --- Patka s tlačítky ----------------------------------------------------
   Vždy vidět. Posouvá se `.app__telo` nad ní, ne celá karta. */
.app__pata {
    flex: 0 0 auto;
    display: flex; gap: 12px;
    padding: 14px 20px 20px;
    background: var(--telo);
    border-top: 1px solid var(--pata-linka);
}
.tl {
    min-height: 58px;
    padding: 14px 22px;
    border-radius: var(--r);
    font: inherit; font-weight: 700; font-size: 1.05rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.tl--hlavni { flex: 1 1 auto; background: var(--zluta); border: 0; color: var(--inkoust); }
.tl--hlavni:hover { background: var(--zluta-tmava); }
.tl--vedlejsi {
    flex: 0 0 auto;
    background: transparent;
    border: 1.5px solid var(--linka);
    color: var(--text);
}
.tl--vedlejsi:hover { border-color: var(--text-2); }
.tl:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
/* „Jak o superdávku požádat" je <a> stylovaný jako tlačítko — podtržení
   z výchozího stylu odkazu by vypadalo jako vada. */
a.tl { text-decoration: none; }

.chyba {
    margin: 0 20px 10px;
    padding: 10px 14px;
    background: var(--chyba-pozadi);
    border: 1px solid var(--chyba-linka);
    border-radius: 10px;
    color: var(--chyba-text);
    font-size: 0.92rem;
}
.chyba[hidden] { display: none; }
/* Pole, ke kterému se hláška vztahuje. Hláška je v patce a pole v těle —
   bez označení nebylo poznat, kam psát (snímek zakladatele 12. 10. 2026). */
.vstup[aria-invalid="true"], .vyber[aria-invalid="true"] { border-color: var(--chyba-linka); }

/* =========================================================================
   Výsledek — účtenka
   ========================================================================= */
.uctenka {
    background: var(--papir);
    color: var(--inkoust);
    border-radius: 18px;
    padding: 26px 26px 22px;
    display: flex; flex-direction: column;
    min-height: 100%;
}
.uctenka__hlava { text-align: center; }
.uctenka__nadpis {
    margin: 0;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #3d4576;
}
.uctenka__zadani { margin: 6px 0 0; color: #5b6398; font-size: 0.95rem; }

/* Trhací čára — dvě, nad a pod rozpisem. */
.uctenka__cara {
    height: 0; margin: 18px 0;
    border-top: 2px dashed #c3c9e8;
}
.uctenka__radky { margin: 0; }
.uctenka__radek {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
}
.uctenka__radek dt { margin: 0; }
.uctenka__radek dd {
    margin: 0;
    font-family: inherit; font-variant-numeric: tabular-nums;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.uctenka__radek--tichy dt, .uctenka__radek--tichy dd { color: #6b73aa; }

.uctenka__soucet {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px;
    margin: 4px 0 0;
}
.uctenka__soucet-popis { font-weight: 700; flex: 0 1 auto; line-height: 1.25; }
/* ⚠️ `nowrap` — bez něj se „Kč" zalomilo pod částku a výsledek zabral
   dva řádky. Na papíře to vypadalo jako dvě různá čísla. */
.uctenka__soucet-castka {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: inherit; font-variant-numeric: tabular-nums;
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.uctenka__pozn {
    margin: auto 0 0;
    padding-top: 22px;
    color: #6b73aa; font-size: 0.88rem;
}
.uctenka__paticka {
    display: flex; justify-content: space-between; gap: 12px;
    margin: 10px 0 0;
    color: #6b73aa; font-size: 0.88rem;
}
.uctenka__logo { display: none; }   /* jen pro tisk */

.app__pata--vysledek { flex-direction: column; gap: 10px; }
.app__pata--vysledek .tl--hlavni { width: 100%; }
.app__pata--vysledek .vysledek__dvojice { display: flex; gap: 10px; }
.app__pata--vysledek .vysledek__dvojice .tl { flex: 1 1 0; }

/* =========================================================================
   Mobil — kalkulačka přes celou obrazovku
   =========================================================================
   ⚠️⚠️ NENÍ to `@media (max-width: …)`, a to schválně.
   Kalkulačka běží v iframu širokém 440 px, takže media query by uvnitř
   rámu měřila **rám, ne obrazovku** — a na desktopu by se zapnulo mobilní
   rozvržení. (Přesně to se stalo při první zkoušce: zmizelo slunce
   z hlavičky a popisek pod displejem.)
   Třídu `uzke` nasazuje skript podle šířky NADŘAZENÉHO okna; když není
   dostupné (samostatná adresa), podle vlastní. */
.uzke .app {
    max-width: none; max-height: none;
    border-radius: 0;
    /* ⚠️ `dvh` kvůli liště prohlížeče na mobilu — s `vh` se patka
       s tlačítky schová pod adresní řádek. */
    height: 100dvh;
}
.uzke.samostatne { padding: 0; }
.uzke.samostatne .app { height: 100dvh; box-shadow: none; }

.uzke .app__head { padding: 12px 14px; }
.uzke .app__zpet-mobil { display: grid; }
/* Na mobilu je název vycentrovaný mezi kolečky (viz obrazovka 4). */
.uzke .app__znacka { flex: 1 1 auto; justify-content: center; }
.uzke .app__slunce { display: none; }
.uzke .app__nazev { font-size: 1rem; }

.uzke .app__vrch,
.uzke .app__telo,
.uzke .app__pata { padding-left: 14px; padding-right: 14px; }

/* Displej se srazí do jednoho řádku, ať zbyde místo na otázku. */
.uzke .displej { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.uzke .displej__hlava { flex: 1 1 auto; min-width: 0; display: block; }
.uzke .displej__titulek { font-size: 0.7rem; line-height: 1.3; white-space: normal; }
.uzke .displej__cislo { margin: 0; min-height: 0; }
.uzke .displej__castka { font-size: 2rem; }
.uzke .displej__pod { display: none; }
.uzke .displej__znacka { position: absolute; top: -8px; right: 12px; }

.uzke .otazka { font-size: 1.4rem; }
.uzke .app__telo::before,
.uzke .app__telo::after { margin-left: -14px; margin-right: -14px; }
/* Dvojice tlačítek pod výsledkem — „Spočítat znovu" se na 375 px
   zalamovalo na dva řádky. */
.uzke .vysledek__dvojice .tl { font-size: 0.95rem; padding: 12px 10px; }

/* Nízká karta (na výšku málo místa) — displej se zmenší, ať se otázka
   a tlačítka pořád vejdou. Třídu nasazuje skript, ze stejného důvodu
   jako `uzke`: media query by měřila rám, ne obrazovku. */
.nizke .displej { padding: 12px 18px 10px; }
.nizke .displej__cislo { min-height: 44px; }
.nizke .displej__castka { font-size: 2.1rem; }
.nizke .displej__pod { display: none; }
.nizke .otazka { font-size: 1.32rem; }

/* Hodně nízká karta — notebook 1366×768 se zvětšením 125 %, okno ~480 px.
   Displej se srazí do řádku jako na mobilu; jinak se pole s otázkou schová
   pod prolnutí a vidět je jen tlačítko, ne to, co se má vyplnit.
   ⚠️ Tady media query smí být, na rozdíl od `uzke`: šířka rámu je pevná,
   ale jeho výška JE výška karty. `.app` vpředu kvůli váze nad `.nizke`. */
@media screen and (max-height: 540px) {
    .app .app__head { padding-top: 10px; padding-bottom: 8px; }
    .app .displej { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
    .app .displej__hlava { flex: 1 1 auto; min-width: 0; display: block; }
    .app .displej__cislo { margin: 0; min-height: 0; }
    .app .displej__castka { font-size: 1.8rem; }
    .app .displej__pod { display: none; }
    .app .kroky { margin: 10px 0 4px; }
    .app .otazka { font-size: 1.2rem; }
    .app .podotazka { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* =========================================================================
   Kolo 2 (26. 9. 2026)
   ========================================================================= */

/* Otazník drží u posledního slova nadpisu (bod 8). Bez `nowrap` se na úzké
   kartě zalomil na samostatný řádek. */
.nezlomit { white-space: nowrap; }

/* --- Prolnutí při posouvání (bod 10) --------------------------------------
   Když obsah odjede nahoru, useknutý text pod ukazatelem kroků vypadal jako
   chyba. Prolnutí se ukáže jen tím směrem, kde opravdu něco je — skript
   nasazuje `je-nahore` / `je-dole`.
   Kreslí se jako pseudoprvky těla, ne jako `mask-image` — maska by
   ořízla tehdejší plovoucí nápovědu; od 12. 10. je nápověda v textu. */
.app__telo::before,
.app__telo::after {
    content: "";
    position: sticky;
    left: 0; right: 0;
    display: block;
    height: 22px;
    margin: 0 -20px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity .15s;
}
.app__telo::before {
    top: -8px;
    margin-bottom: -22px;
    background: linear-gradient(var(--telo), transparent);
}
.app__telo::after {
    bottom: -20px;
    margin-top: -22px;
    background: linear-gradient(transparent, var(--telo));
}
.je-nahore .app__telo::before { opacity: 1; }
.je-dole .app__telo::after { opacity: 1; }
/* U výsledku prolnutí vypnout. Tmavý přechod přes bílou účtenku vypadal
   jako šmouha — okraj papíru sám ukazuje, kde obsah končí. */
.je-vysledek .app__telo::before,
.je-vysledek .app__telo::after { opacity: 0 !important; }

/* --- Počítadlo − / + (bod 9) ---------------------------------------------- */
.pocitadlo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--panel);
    border: 1.5px solid var(--linka);
    border-radius: var(--r);
}
.pocitadlo__tl {
    width: var(--dotyk); height: var(--dotyk);
    display: grid; place-items: center;
    padding: 0;
    background: transparent;
    border: 0; border-radius: 10px;
    color: var(--text);
    font: inherit; font-size: 1.4rem; font-weight: 700; line-height: 1;
    cursor: pointer;
}
.pocitadlo__tl:hover:not(:disabled) { background: var(--tlumena); }
.pocitadlo__tl:disabled { color: var(--linka); cursor: default; }
.pocitadlo__tl:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }
.pocitadlo__hodnota {
    min-width: 44px;
    text-align: center;
    font-size: 1.25rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- Osoba: popisek štítků a důvody zranitelnosti ------------------------ */
.osoba__popis {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px;
    font-weight: 700; font-size: 0.95rem;
}
.vek__popis .napoveda { margin-left: 2px; }
.duvody {
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--linka);
}
.duvody__titul {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 0 10px;
    font-size: 0.92rem; color: var(--text-2);
}
.duvody .stitek {
    display: flex; align-items: center;
    width: 100%;
    margin: 0 0 8px;
    text-align: left;
    border-radius: 12px;
    font-weight: 600;
}

/* --- Účtenka, která jde sečíst (bod 1) ------------------------------------ */
.uctenka__skupina {
    margin: 12px 0 2px;
    font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #6b73aa;
}
.uctenka__skupina:first-child { margin-top: 0; }
.uctenka__radek { flex-wrap: wrap; }
.uctenka__radek dt { flex: 1 1 60%; }
.uctenka__radek dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.uctenka__proc {
    display: block;
    margin-top: 1px;
    font-weight: 400;   /* i pod tučným řádkem výsledku */
    font-size: 0.82rem;
    color: #6b73aa;
    line-height: 1.35;
}
.uctenka__radek--mezisoucet {
    border-top: 1px solid #dfe2f3;
    font-weight: 600;
}
.uctenka__radek--vysledek { font-weight: 800; }
.uctenka__radek sup, .uctenka__vysvetlivky sup { font-size: 0.7em; }

/* Popisek NAD částkou (bod 12) — vedle se na úzké kartě zalamoval. */
.uctenka__soucet {
    display: block;
    text-align: right;
}
.uctenka__soucet-popis {
    display: block;
    max-width: none;
    font-size: 0.85rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: #3d4576;
}
.uctenka__soucet-castka { display: block; margin-top: 2px; }

.uctenka__vysvetlivky {
    margin: 16px 0 0; padding: 0;
    list-style: none;
    font-size: 0.78rem; line-height: 1.4;
    color: #6b73aa;
}
.uctenka__vysvetlivky li { margin: 0 0 4px; }
.uctenka__upozorneni {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: #fff4d6;
    border-left: 3px solid var(--zluta);
    border-radius: 6px;
    font-size: 0.86rem;
}

/* =========================================================================
   TISK — jen výsledek, jedna A4, černobíle
   =========================================================================
   ⚠️ Tiskne se **dokument kalkulačky**, ne web pod ní. Tlačítko volá
   `window.print()` zevnitř iframu, takže prohlížeč sází jen tenhle
   dokument. Tmavé tělo kalkulačky se celé schová.

   ⚠️ `@page { margin: 0 }` je tu schválně: Chrome při nulovém okraji
   **nevytiskne své záhlaví a zápatí** (datum, adresu, číslo stránky).
   Okraje si pak dělá `.uctenka` sama. Bez toho by se přes stránku táhlo
   `file:///…` a datum, což na dokladu pro úřad nemá co dělat.
   💡 Firefox má vlastní přepínač „Tisknout záhlaví a zápatí" — ten CSS
   neovlivní a musí se odškrtnout ručně. */
@page { size: A4 portrait; margin: 0; }

@media print {
    html, body { height: auto; background: #fff !important; color: #000; }
    body.samostatne { display: block; padding: 0; background: #fff !important; }

    /* Z celé aplikace zůstane jedna věc — účtenka. */
    .app__head, .app__vrch, .app__pata, .kroky, .kroky__popis,
    .napoveda, .napoveda__panel, .chyba, .app__telo > form { display: none !important; }
    .app__telo::before, .app__telo::after { display: none !important; }
    .uctenka__vysvetlivky { font-size: 8pt; color: #333; }
    .uctenka__skupina { color: #000; }
    .uctenka__upozorneni { background: #fff !important; border-left: 1.5pt solid #000; }

    .app {
        display: block;
        max-width: none; max-height: none; height: auto;
        margin: 0; background: #fff !important;
        border: 0 !important;
        border-radius: 0; overflow: visible;
        /* ⚠️ Stín karty se na papíře vykreslil jako zaoblený rámeček kolem
           celého výtisku — vypadalo to jako oskenovaná kartička. Zadání
           výslovně chce čistý papír bez čar po stranách. */
        box-shadow: none !important;
    }
    .app__telo { display: block; overflow: visible; padding: 0; min-height: 0; }

    .uctenka {
        display: block;
        min-height: 0;
        margin: 0;
        /* Rovnoměrné okraje — obsah se nesmí dotýkat kraje papíru.
           15 mm je nad hardwarovým okrajem běžných tiskáren. */
        padding: 11mm 16mm;
        background: #fff !important;
        color: #000;
        border-radius: 0;
        font-size: 10pt;
        line-height: 1.35;
    }
    /* ⚠️ Žádné linky po stranách — zadání je chce pryč. Dělaly je dvě věci:
       stín karty a hlavně FOKUSOVÝ RÁMEČEK účtenky. Po výpočtu na ni skript
       přesouvá fokus (kvůli odečítačům) a prohlížeč ho na papíře vykreslil
       jako obdélník přes celou stránku. Na obrazovce zůstává, tam patří. */
    :focus, :focus-visible { outline: 0 !important; }
    .uctenka, .uctenka * { box-shadow: none !important; border-width: 0; }
    .uctenka__podnadpis { border-bottom-width: 0.5pt; }

    .uctenka__logo {
        display: block;
        height: 9mm; width: auto;
        margin: 0 auto 4mm;
    }
    .uctenka__nadpis { color: #000; font-size: 8pt; letter-spacing: 0.16em; }
    .uctenka__zadani { color: #333; font-size: 10pt; }
    .uctenka__cara { margin: 3mm 0; border-top: 1pt dashed #999; }

    .uctenka__radek { padding: 1.1mm 0; page-break-inside: avoid; }
    .uctenka__radek dd { font-size: 10.5pt; }
    .uctenka__radek--tichy dt, .uctenka__radek--tichy dd { color: #555; }
    /* Důvod u nulové složky — na papíře musí být, aby nula nevypadala
       jako chyba výpočtu. Na obrazovce ho nese `.uctenka__proc`. */
    .uctenka__proc { display: block; color: #555; font-size: 8.5pt; }

    .uctenka__soucet { margin: 3mm 0 0; page-break-inside: avoid; }
    .uctenka__soucet-castka { font-size: 18pt; }

    /* Bloky jen pro papír. */
    .tisk-jen { display: block !important; }
    .uctenka__udaje, .uctenka__codal {
        margin: 4mm 0 0;
        page-break-inside: avoid;
    }
    .uctenka__podnadpis {
        margin: 0 0 2mm;
        font-size: 8pt; font-weight: 700;
        letter-spacing: 0.14em; text-transform: uppercase;
        color: #000;
        border-bottom: 0.5pt solid #999;
        padding-bottom: 1mm;
    }
    .uctenka__udaje dl { margin: 0; }
    .uctenka__udaje .uctenka__radek { padding: 0.6mm 0; font-size: 9.5pt; }
    .uctenka__codal p { margin: 0 0 1.5mm; font-size: 9.5pt; }
    .uctenka__codal strong { font-weight: 700; }

    .uctenka__pozn { padding-top: 3mm; color: #333; font-size: 8.5pt; }
    .uctenka__paticka { margin-top: 3mm; color: #555; font-size: 8.5pt; }

    /* Odkazy černě a bez adresy za textem — adresa je vypsaná v „Co dál". */
    a { color: #000; text-decoration: none; }
    a[href]::after { content: "" !important; }
}

/* Bloky určené jen pro tisk jsou na obrazovce schované. */
.tisk-jen { display: none; }