/* Světlý motiv.
 *
 * Šablony mají barvy natvrdo v Tailwind třídách (přes 1 500 výskytů). Přepsat
 * je po jedné by byla obrovská a riziková práce, takže se místo toho pod
 * [data-theme="light"] předefinuje, co ty třídy znamenají. Paleta je malá
 * a důsledná, takže to pokryje pár desítek pravidel.
 *
 * Selektor s atributem je specifičtější než holá třída, takže vyhraje
 * i nad utilitou z CDN a není potřeba !important.
 *
 * Sémantické barvy (dobře/špatně) se sázejí proměnnou v base.html —
 * zisk má být zelený na světlém i tmavém pozadí.
 */

:root[data-theme="light"] {
    color-scheme: light;
}

/* --- grafy ---
 *
 * Barvy dat jsou inline v SVG (počítá je app/charts.py) a jsou schválně
 * takové, aby seděly na tmavém i světlém pozadí — jinak by musela být
 * dvojí paleta a každý graf dvakrát.
 *
 * Kostra grafu (mřížka, popisky os) se ale podle motivu lišit musí:
 * mřížka je definovaná jako „sotva viditelná", a to je na černé světlá
 * čára a na bílé tmavá. Proto je tady, a ne v šabloně.
 */
.chart-grid { stroke: rgba(255, 255, 255, 0.07); }
.chart-zero { stroke: rgba(255, 255, 255, 0.22); }
.chart-track { stroke: rgba(255, 255, 255, 0.06); }
/* Popisky os.
 *
 * Velikost je tady a ne atributem v SVG. Graf má viewBox široký 720 jednotek
 * a roztahuje se na šířku rodiče, takže text se zmenšuje spolu s ním —
 * devítka v pořádku na monitoru vyjde na telefonu na čtyři pixely. CSS
 * pravidlo přebíjí prezentační atribut, takže velikost jde řídit odsud.
 *
 * Zvětšovat ji na úzkém displeji nejde: odsazení pro osu Y je v týchž
 * jednotkách a pevné, takže větší písmo z něj vyteče a „3 000" se ořízne
 * na „000". Čitelnost na mobilu proto řeší `.chart-scroll` — graf se drží
 * v použitelné šířce a odroluje, stejně jako to v appce dělají tabulky. */
.chart-axis {
    fill: #71717a;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

/* Graf drží šířku mezi dvěma mezemi, jinak text uvnitř nesedí se zbytkem
 * stránky. Strop je na šířce plátna (900), takže na monitoru vychází
 * měřítko 1:1 a popisky měří přesně tolik, kolik je v CSS napsáno; bez
 * něj se SVG roztáhlo přes celou kartu a jedenáctka vyrostla na patnáct
 * pixelů, tedy víc než běžný text kolem. Dno je na 640 — pod ním se
 * popisky scvrknou pod čitelnost, takže se radši odroluje. */
.chart-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.chart-scroll::-webkit-scrollbar { display: none; }

.chart-scroll > svg {
    min-width: 640px;
    max-width: 900px;
}

[data-theme="light"] .chart-grid { stroke: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .chart-zero { stroke: rgba(0, 0, 0, 0.25); }
[data-theme="light"] .chart-track { stroke: rgba(0, 0, 0, 0.07); }
[data-theme="light"] .chart-axis { fill: #71717a; }

/* --- plochy --- */
[data-theme="light"] body,
[data-theme="light"] .bg-black { background-color: #f4f4f5; }
/* Horní lišta je poloprůhledná (bg-black/90), takže na .bg-black nesedí. */
[data-theme="light"] .bg-black\/90 { background-color: rgba(255, 255, 255, 0.9); }
/* Dny mimo zobrazený měsíc v kalendáři. Na černé je 40% černá sotva znatelné
   ztmavení, na bílé je z toho tmavě šedý blok, který přebije samotný měsíc —
   a písmo v něm zmizí. Ve světlém motivu proto jen náznak. */
[data-theme="light"] .bg-black\/40 { background-color: rgba(0, 0, 0, 0.045); }
[data-theme="light"] .bg-neutral-950 { background-color: #ffffff; }
[data-theme="light"] .bg-neutral-900 { background-color: #fafafa; }
[data-theme="light"] .bg-white\/5 { background-color: rgba(0, 0, 0, 0.04); }
[data-theme="light"] .bg-white\/10 { background-color: rgba(0, 0, 0, 0.09); }

/* --- text --- */
[data-theme="light"] .text-white { color: #18181b; }
/* Světlé odstíny se používají na zvýraznění uvnitř věty. Na bílé by zmizely. */
[data-theme="light"] .text-neutral-100 { color: #18181b; }
[data-theme="light"] .text-neutral-200 { color: #27272a; }
[data-theme="light"] .text-neutral-300 { color: #3f3f46; }
[data-theme="light"] .text-neutral-400 { color: #52525b; }
[data-theme="light"] .text-neutral-500 { color: #71717a; }
[data-theme="light"] .text-neutral-600 { color: #a1a1aa; }
[data-theme="light"] .text-neutral-700 { color: #d4d4d8; }

/* --- linky a okraje --- */
[data-theme="light"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.10); }
[data-theme="light"] .border-white\/15 { border-color: rgba(0, 0, 0, 0.16); }
[data-theme="light"] .border-white\/20 { border-color: rgba(0, 0, 0, 0.22); }
[data-theme="light"] .divide-white\/10 > * + * { border-color: rgba(0, 0, 0, 0.10); }
[data-theme="light"] .border-dotted { border-color: rgba(0, 0, 0, 0.18); }
/* Podtržení odkazů v souhrnech — bílé na bílé není podtržení. */
[data-theme="light"] .decoration-white\/25 { text-decoration-color: rgba(0, 0, 0, 0.28); }
[data-theme="light"] .decoration-white\/20 { text-decoration-color: rgba(0, 0, 0, 0.24); }
[data-theme="light"] .bg-white\/20 { background-color: rgba(0, 0, 0, 0.22); }

/* --- stavy --- */
[data-theme="light"] .hover\:border-white\/40:hover { border-color: rgba(0, 0, 0, 0.4); }
[data-theme="light"] .hover\:text-white:hover { color: #18181b; }
[data-theme="light"] .group:hover .group-hover\:text-accent { color: var(--accent); }

/* Zelená z tmavého motivu je na bílé moc světlá — ztmavit, ať je čitelná. */

/* Placeholdery byly laděné na tmavé pozadí. */
[data-theme="light"] .placeholder\:text-neutral-600::placeholder { color: #a1a1aa; }

/* Vlastní ovládání formulářů — nativní prvky jinak zůstanou tmavé. */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea { color: #18181b; }
[data-theme="light"] option { background-color: #ffffff; color: #18181b; }

/* Bílý text na accentu (tlačítka) musí zůstat bílý i ve světlém motivu. */
[data-theme="light"] .bg-accent,
[data-theme="light"] .bg-accent .text-white,
[data-theme="light"] .file\:bg-accent::file-selector-button { color: #ffffff; }
[data-theme="light"] .bg-accent.text-white { color: #ffffff; }

/* --- rozbalovací panel ---
 *
 * Detail účtu se otevírá klikem, bez JavaScriptu a bez dalšího requestu:
 * skrytý checkbox drží stav, sousední panel na něj reaguje.
 *
 * Výška se animuje přes grid-template-rows 0fr -> 1fr. Klasické
 * `height: auto` animovat nejde a `max-height` se musí odhadnout — když se
 * odhadne moc velký, je konec animace znát jako pauza. Tohle si výšku
 * spočítá samo a jede plynule oběma směry.
 *
 * Proč ne <details>: obsah v zavřeném stavu vůbec nerenderuje, takže
 * přechod nemá z čeho animovat a panel jen problikne.
 */
.reveal-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-panel > * { overflow: hidden; }
.reveal-toggle:checked ~ .reveal-panel { grid-template-rows: 1fr; }
.reveal-chevron { transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-toggle:checked ~ label .reveal-chevron { transform: rotate(180deg); }
.reveal-toggle:checked ~ label .reveal-hint { opacity: 0; }

/* Kdo si vypnul animace v systému, ten je nechce ani tady. */
@media (prefers-reduced-motion: reduce) {
    .reveal-panel, .reveal-chevron { transition: none; }
}

/* --- listovací dlaždice ---
 *
 * Stránky leží vedle sebe a scrollují se vodorovně se snapem, takže se
 * vždycky zastaví na celé stránce. Používá se nativní scroll: prst na
 * mobilu i kolečko na trackpadu pak funguje přesně tak, jak je systém
 * zvyklý dělat, a nic se nekouše.
 */
.pages {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Scrollbar by pod každou dlaždicí zabíral místo a byl vidět i v klidu. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Aby prst při svislém scrollu stránky dlaždici omylem nelistoval. */
    touch-action: pan-x pan-y;
    /* Vodorovný přetah nesmí spustit „zpět" v prohlížeči. */
    overscroll-behavior-x: contain;
    /* Každá dlaždice si drží svou výšku. Výchozí `stretch` dá všem výšku
     * té nejvyšší, takže téma s dvěma články mělo stejných 1 647 px jako
     * téma s dvanácti — a zbytek bylo prázdno, kterým se muselo rolovat.
     * Stránka je pak vysoká jako nejvyšší dlaždice i tehdy, když se člověk
     * kouká na tu krátkou. */
    align-items: flex-start;
}
.pages::-webkit-scrollbar { display: none; }
.pages > * {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
}
/* Aktivní tečka. Třídu přepíná skript; bez něj zůstanou tečky šedé,
   ale listování funguje dál. */
[data-dot].is-active { background-color: var(--accent); }

/* --- reakce na myš ---
 *
 * Dvě úrovně, ne jedna. Kdyby „vyskočilo" všechno, nevyskočí nic:
 * pohyb pak nenese informaci a stránka jen šumí.
 *
 * `.lift` je pro to, na co se dá kliknout — dlaždice, řádek účtu, pozice.
 * Nadzvednutí o pixel a stín říká „tohle je tlačítko".
 * `.glow` je pro velké sekce. Ty se neklikají, takže se jen rozsvítí okraj:
 * potvrdí, kde je myš, a nehýbe s rozvržením.
 */
.lift,
.glow {
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease,
        background-color 160ms ease;
}
.lift:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.7);
}
.lift:active { transform: translateY(0); }
.glow:hover { border-color: rgba(255, 255, 255, 0.18); }

[data-theme="light"] .lift:hover {
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .glow:hover { border-color: rgba(0, 0, 0, 0.18); }

/* Klávesnice musí vidět totéž co myš. */
.lift:focus-within {
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
}

/* --- grafy pod myší ---
 *
 * Bod se zvětší a ztmavne okolí, aby bylo vidět, ke které hodnotě patří
 * bublina s číslem. Zásah myši je schválně větší než samotný bod — trefit
 * se do třípixelového kolečka na dotyku nejde.
 */
.chart-hit { fill: transparent; cursor: crosshair; }
.chart-dot { transition: r 120ms ease, opacity 120ms ease; }
.chart-hit:hover + .chart-dot,
.chart-dot:hover { r: 5; }
.chart-bar { transition: opacity 120ms ease; }
.chart-bar:hover { opacity: 0.75; cursor: pointer; }

/* Bublina s hodnotou. Jedna na stránku, přesouvá ji skript. */
#chart-tip {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -140%);
    transition: opacity 120ms ease;
    background: #18181b;
    color: #fafafa;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4px 8px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
}
#chart-tip.is-visible { opacity: 1; }
[data-theme="light"] #chart-tip {
    background: #ffffff;
    color: #18181b;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.25);
}

/* --- hláška po akci ---
 *
 * Přijede shora, aby si jí člověk všiml i když je stránka odscrollovaná
 * jinde než nahoře. Nemizí sama: „aktualizováno 5 cen, 2 se nepovedly" je
 * informace, kterou si má přečíst, ne jen zahlédnout.
 */
.flash {
    animation: flash-in 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}
.flash-close:checked + .flash { display: none; }

/* Tlačítko, které čeká na server. Nemá jít zmáčknout dvakrát. */
button.is-busy {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .lift, .glow, .chart-dot, .chart-bar, #chart-tip { transition: none; }
    .lift:hover { transform: none; }
    .flash { animation: none; }
}

/* Pole v plánu, které vypadá jako text, dokud se do něj nesáhne.
 *
 * Hodnota v plánu je zároveň to, co se dá přepsat — dvojklik do ní trefí
 * celé číslo a Enter to uloží. Kdyby to byl text s tužtičkou vedle, znamená
 * to dvě kliknutí navíc pokaždé, když si člověk chce ubrat deset deka rýže.
 * Rámeček se ukáže až při najetí a při psaní, aby seznam nevypadal jako
 * formulář.
 */
.pole-plan {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 1px 4px;
    color: rgb(212 212 212);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color .12s, background-color .12s;
}

.pole-plan:hover {
    border-color: rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .04);
}

.pole-plan:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

/* Šipky u čísel jen při psaní — jinak z řádku dělají tabulku. */
.pole-plan::-webkit-outer-spin-button,
.pole-plan::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pole-plan[type="number"] { -moz-appearance: textfield; }
.pole-plan::placeholder { color: rgb(82 82 82); }

/* Odskok pod lištu při skoku na kartu. Bez něj se nadpis schová za horní
 * lištu a vypadá to, že odkaz mine cíl o kus. */
[id^="karta-"] { scroll-margin-top: 5rem; }

/* Rozbalovátka. Bez tohohle je kreslí operační systém: světlá lišta
 * uprostřed tmavé stránky, jiná na Macu a jiná na telefonu, a šipka, která
 * neodpovídá ničemu kolem. Vlastní vzhled je jediná cesta, jak to sjednotit.
 *
 * Šipka je pozadí v SVG, ne prvek navíc — jinak by musela mít každá volba
 * obal a šablony by se z toho staly matrjošky. `currentColor` v ní být
 * nemůže (SVG v `url()` nedědí barvu), takže je natvrdo šedá a při najetí
 * a fokusu se mění jen rámeček.
 */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23737373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.7rem;
    /* Místo pro šipku vpravo. Bez toho ji delší volba podjede. */
    padding-right: 1.9rem;
    text-overflow: ellipsis;
}

select:hover { border-color: rgba(255, 255, 255, .3); }

/* Rozbalený seznam kreslí systém a stylovat se nedá; aspoň ať v něm není
 * bílý text na bílé, když má člověk světlý režim systému a tmavou appku. */
select option { background: #0a0a0a; color: #e5e5e5; }

/* Pole v plánu je select taky — tam se šipka nehodí, je to jedno číslo. */
select.pole-plan { padding-right: 1.6rem; background-position: right 0.35rem center; }

/* --- appka na telefonu -------------------------------------------------
 *
 * Po přidání na plochu běží stránka na celou obrazovku, tedy i pod výřezem
 * a pod čárkou gesta. Bez odsazení leží nadpis pod hodinami a spodní
 * tlačítko pod ovládací lištou — to je ten rozdíl mezi „web na plochu" a
 * „appka". `env()` vrací nulu tam, kde žádný výřez není, takže se to nemusí
 * podmiňovat.
 */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Spodek řeší poslední prvek stránky, ne body — jinak by se odsazení
     * sečetlo s vlastním odsazením <main> a vznikl by pruh navíc. */
}

main {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
}

/* Horní lišta drží pod stavovým řádkem. Je připnutá, takže jí to nesmí
 * přidat výšku — proto padding, ne margin. */
.topbar, header[data-topbar] {
    padding-top: env(safe-area-inset-top);
}

/* Odraz při dotažení na konec seznamu vypadá v appce jako chyba: stránka
 * se odlepí a je za ní bílo. Uvnitř appky se to nedělá. */
html {
    overscroll-behavior-y: contain;
    /* iOS po otočení zvětšuje text sám a rozbíjí tím sazbu. */
    -webkit-text-size-adjust: 100%;
}

/* Šedý blik při ťuknutí je znak prohlížeče, ne appky. Stavy si kreslíme
 * sami (`:active`, `:focus-visible`), tak ať se to nepere. */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Ťukací cíle. Na telefonu se míří palcem, ne kurzorem — pod 40 px se to
 * míjí a člověk to svádí na appku. Platí jen na dotykových zařízeních, aby
 * se myší ovládaná stránka zbytečně neroztahovala. */
@media (pointer: coarse) {
    button, .btn, .btn-sm, .btn-lg, select, input[type="checkbox"], input[type="radio"] {
        min-height: 40px;
    }
    .pole-plan { min-height: 32px; }

    /* Odkazy tahle pravidla míjela: `min-height` na řádkovém odkazu nic
     * nedělá a `padding` by rozhodil řádky, ve kterých odkaz stojí vedle
     * nadpisu. Měřeno v headless prohlížeči s emulací dotyku: odkazy typu
     * „CELÁ STRÁNKA →" měly 15 px na výšku, značka v liště 19 px na šířku.
     * Palec má podle Applu dostat 44 px.
     *
     * Plocha se proto zvětšuje průhlednou vrstvou, ne odsazením. Layout se
     * nezmění ani o pixel — vrstva leží nad okolím a jen chytá ťuknutí.
     * Vodorovně méně než svisle: řádek „nadpis ... odkaz" má odkazy u sebe
     * a široká vrstva by brala ťuknutí tomu vedle. */
    /* Zvětšuje se skutečný box odkazu, ne průhledná vrstva nad ním.
     * Vrstva přes `::before` se dá zaříznout `overflow: hidden` na kartě
     * a přebít sousedem — naměřeno: místo 45 px vycházelo 31 a někde 16.
     * Odsazení zvětší box vždy, záporná marže ho vrátí na místo, takže
     * vnější rozměr zůstane stejný a řádek se nikam neposune. */
    a.font-mono, a.btn-mini, a.btn-tichy, a.btn-x {
        padding-block: 0.95rem;
        margin-block: -0.95rem;
        /* Bez `position` a `z-index` prohrává zvětšený box v hit-testu
         * se sousedem, který se kreslí po něm — naměřeno: část odkazů
         * ve Financích zůstávala na 31 px, protože ťuknutí nad nimi
         * sebral soused. Takhle je odkaz navrchu. */
        position: relative;
        z-index: 1;
    }
}

/* --- hustota na telefonu ---------------------------------------------
 *
 * Rozměry jsou laděné na monitor a na displeji v ruce z nich vzniká dojem,
 * že je appky „moc". Nejde o čitelnost, jde o objem: na 390px displeji je
 * 24 px odsazení karty skoro desetina šířky, takže se text láme dřív,
 * karta je vyšší a stránka delší, než musí být.
 *
 * Mění se jen rozteče, ne velikost písma ani barvy — obsah zůstává celý,
 * jen se ho do obrazovky vejde víc. Hranice 430px je po největší iPhone
 * včetně; na tabletu je plochy dost a tam to zůstává, jak bylo.
 *
 * Selektory jsou dvojité (`.glow.p-6`), aby přebily Tailwind utilitu
 * o jedné třídě. Media query sama specificitu nepřidává.
 */
@media (max-width: 430px) {
    .glow.p-6 { padding: 1rem; }
    .glow.p-5 { padding: 0.875rem; }

    /* Svislá rozteč mezi kartami. Tailwind ji řeší přes `margin-top`
     * sousedních prvků, takže se musí přebít stejným tvarem selektoru
     * plus elementem — jinak je utilita specifičtější a vyhraje. */
    main.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
    main.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem; }
    main.flex.flex-col.gap-5 { gap: 0.75rem; }

    /* Čtyřicet pixelů nad prvním nadpisem je na telefonu prázdná obrazovka.
     * Spodek se nechává — tam odsazení drží místo pro ovládací lištu
     * systému (viz `main` výš). */
    main.py-10 { padding-top: 1.25rem; }
}

/* Nejmenší písmo v appce je 10px — na monitoru drobný popisek, na telefonu
 * hádanka. Apple chce u čitelného textu aspoň 11px. Je to uppercase mono
 * s prostrkáním, takže o pixel výš nic nerozhodí; měřeno, přetečení se
 * nikde neobjevilo.
 *
 * Hranice je 430px, tedy po největší iPhone včetně. Na tabletu se text
 * čte z větší dálky, ale taky z větší plochy — tam 10px zůstává. */
@media (max-width: 430px) {
    .text-\[10px\] { font-size: 11px; }
}

/* --- vlastní rozbalovátko (viz vyber.js) ------------------------------- */

.vyber { position: relative; display: inline-block; }
.vyber-puvodni {
    /* Zůstává ve formuláři kvůli odeslání hodnoty, jen není vidět.
     * `display: none` nejde: skryté pole některé prohlížeče neodesílají
     * a validace by na něj nedosáhla. */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

/* Tlačítko přebírá třídy původního selectu, ale ne jeho šipku — ta visela
 * na `select` a na `button` se nedědí. Bez ní vypadalo rozbalovátko jako
 * obyčejné textové pole a nebylo poznat, že se dá otevřít. */
.vyber-tlacitko {
    text-align: left;
    width: 100%;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23737373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.7rem;
    padding-right: 1.9rem;
    /* Delší volba nesmí tlačítko roztáhnout přes půl řádku. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .12s, background-color .12s;
}

.vyber-tlacitko:hover { border-color: rgba(255, 255, 255, .3); }

/* Šipka se při otevření otočí — je to jediné, co u zavřeného a otevřeného
 * stavu odlišuje víc než barva rámečku. */
.vyber.is-open .vyber-tlacitko {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5 6 1.5l5 5' fill='none' stroke='%23737373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Obal musí být stejně široký jako původní pole, jinak se rozbalovátko
 * v mřížce scvrkne na šířku textu. */
.vyber { width: 100%; }
.vyber.vyber-uzky { width: auto; }

.vyber.is-open .vyber-tlacitko { border-color: var(--accent); }

.vyber-seznam {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 2px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
    padding: 2px;
}

.vyber-polozka {
    display: block;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 13px;
    color: rgb(212 212 212);
    cursor: pointer;
    transition: background-color .1s, color .1s;
}

.vyber-polozka:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.vyber-polozka.is-selected { color: var(--accent); }
.vyber-polozka.is-selected::after { content: " ·"; }