/* ==========================================================================
   Veřejná část IS Voluntia — Portál člena
   --------------------------------------------------------------------------
   Samostatný stylopis. NEDĚDÍ z style.css / desktop.css / mobile.css, které
   patří administraci. Důvody a rozdíly oproti adminu:

   1) Mobile-first s media queries. Admin přepíná stylopis podle User-Agentu
      (public_html/index.php, session isMobile) — tady se to schválně nedělá,
      protože to rozbíjí desktopový prohlížeč v úzkém okně.
   2) Žádné jQuery ani DataTables. Veřejná část si vystačí s trochou vanilla JS
      (public.js, jen otevírání mobilního menu).

   VELIKOSTI JSOU ODMĚŘENÉ Z FIGMY, ne odhadnuté. Rám návrhu je 1920 px široký,
   obsah 1300 px. Postup: export rámu 1:1, změření výšky verzálek jednotlivých
   glyfů a přepočet přes poměr Inter capHeight/em = 1490/2048 = 0,7275
   (u minusek xHeight/em = 1118/2048 = 0,5459). Proto jsou hodnoty v px a ne
   v rem — jsou to přímo naměřená čísla a dají se kdykoli znovu ověřit.

   Mobilní rám v návrhu (469 px) má STEJNÉ velikosti písma jako desktop, jen
   užší obsah. Zmenšuje se proto jen pár největších stupňů, a to až pod 416 px,
   kde by se 60px nadpis na telefonu rozpadl.
   ========================================================================== */

/* ── Písmo ─────────────────────────────────────────────────────────────────
   Inter se hostuje lokálně, ne z Google Fonts: veřejná stránka politické
   strany by neměla posílat IP adresy návštěvníků třetí straně.
   Variabilní řez 400–800 pokrývá všechny použité tloušťky jedním souborem. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    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;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    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;
}

/* ── Tokeny ─────────────────────────────────────────────────────────────── */
:root {
    /* Barvy z rámu „INFORMACE". --bg a --surface jsou schválně stejné: karty
       se v návrhu neodlišují výplní, ale rámečkem. */
    --yellow: #FED801;
    --white: #FFFFFF;
    --black: #000000;
    --bg: #121212;
    --surface: #121212;
    --field: #2A2A2A;
    --field-hover: #333333;
    --border: #2C2C2C;
    --muted: #A0A0A0;
    --dim: #717171;
    --danger: #FF4466;
    --success: #35D07F;

    /* Typografické stupně — naměřeno, viz hlavička souboru.
       hero 60 · nadpis 40 · podnadpis 30 · perex 20 · záložka 22
       text 16 · drobný 15 · poznámka 14 · tlačítko 15 · menu 18 */
    --fs-hero: 44px;          /* pod 416 px; výš 60 px */
    --fs-h1: 32px;            /* pod 416 px; výš 40 px */
    --fs-h2: 26px;            /* pod 416 px; výš 30 px */
    --fs-lead: 18px;
    --fs-link: 20px;        /* odkaz se šipkou; výš 22 px */
    --fs-body: 16px;
    --fs-small: 15px;
    --fs-note: 14px;
    --fs-btn: 16px;
    --fs-nav: 16px;
    --fs-name: 22px;          /* jméno pod fotkou; výš 26 px */
    --fs-person: 40px;        /* jméno na detailu osoby; výš 50 px */

    --lh-hero: 1.15;
    --lh-head: 1.1;
    --lh-body: 1.3;

    --container: 1300px;
    --gutter: 20px;
    --header-h: 80px;
    --icon: 52px;             /* pod 416 px; výš 64 px */

    --radius: 8px;           /* tlačítka */
    --radius-card: 8px;
    --radius-field: 4px;     /* pole formuláře a Odeslat */
    --radius-sm: 4px;        /* cenovka, štítek v logu, štítky sítí */

    /* Jedna škála ovládacích prvků. Návrh měl záložky ve třech velikostech
       (47 / 42 / 40 px) a čtyři různé stupně písma v tlačítkách (14–22 px);
       největší z nich soupeřily s nadpisy a působily neohrabaně. Drží se
       proto jedna výška pro záložky a piluly a jedna pro tlačítka. */
    --btn-h: 48px;
    --btn-pad: 22px;
    --tab-h: 40px;
    --tab-pad: 16px;
    --card-pad: 22px;         /* pod 48em; výš 32 px */
    --section-pad: 48px;      /* pod 48em; výš 76 px */
}

@media (min-width: 26em) {
    :root {
        --fs-hero: 60px;
        --fs-h1: 40px;
        --fs-h2: 30px;
        --fs-lead: 20px;
        --fs-link: 22px;
        --fs-name: 26px;
        --fs-person: 50px;
        --icon: 64px;
    }
}

@media (min-width: 48em) {
    :root {
        --gutter: 24px;
        --card-pad: 32px;
        --section-pad: 76px;
    }
}

/* ── Základ ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* `display` v našem pravidle přebije `display: none`, kterým prohlížeč řeší
   atribut `hidden` — jeho vlastní stylopis má nižší prioritu než náš. Stalo
   se to u žlutého vykřičníku u adresy: skript ho poctivě schovával, ale
   `.address__flag { display: flex }` ho pořád zobrazovalo. */
[hidden] {
    display: none !important;
}

body.public {
    margin: 0;
    background: var(--bg);
    color: var(--white);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    /* Patička drží dole i na krátkých stránkách (Děkujeme). */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.public main {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--yellow);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Tloušťka 700 a nulové prostrkání — odvozeno z poměru šířka/výška verzálky
   v návrhu (ten na rozdíl od samotné šířky nezávisí na velikosti písma):
   „Přidejte se k Voluntii!", „Kulatý stůl" i „Přístupy" sedí na 700/0 na
   desetinu procenta. S 800 a -0.02em vycházely řetězce znatelně užší. */
h1, h2, h3, h4 {
    margin: 0 0 .25em;
    line-height: var(--lh-head);
    font-weight: 700;
    letter-spacing: 0;
}

h1,
h2 {
    font-size: var(--fs-h1);
}

h3 {
    font-size: var(--fs-h2);
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Přihláška a dary nesedí v 1300px sloupci jako zbytek webu — návrh je má
   jako centrovaný blok 916 px (karta 561 + mezera 134 + postranní sloupec 222). */
.container--narrow {
    --container: 916px;
}

/* Nadpis formulářové stránky má k záložkám dál než běžný nadpis (30 px od
   účaří k horní hraně záložky). */
.container--narrow > h1 {
    margin-bottom: 23px;
}

.muted {
    color: var(--muted);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ikony Lucide dědí barvu textu a zarovnají se na účaří. */
.ico {
    display: inline-block;
    vertical-align: -.15em;
    flex: none;
}

/* ── Hlavička ───────────────────────────────────────────────────────────── */
.p-header {
    background: var(--black);
    position: sticky;
    top: 0;
    z-index: 50;
}

.p-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--header-h);
}

/* Logo: značka 72×57, slovo 30 px, štítek 25 px — vše naměřeno. */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--yellow);
    text-decoration: none;
    /* Logo je jediné, co v návrhu opravdu je 800. */
    font-weight: 800;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 1;
}

.logo:hover {
    text-decoration: none;
}

/* Celá sestava v hlavičce a patičce. Výška je stejná jako měla dřívější
   skládačka značka + text (57 px), šířku si dopočítá z poměru stran sama —
   sestavy nejsou stejně široké a natahovat je na jednu míru by je zdeformovalo. */
.logo__full {
    height: 57px;
    width: auto;
    display: block;
}

/* Samotná značka (stránka poděkování, dlaždice voleb). Je to vektor, ne
   obrázek — barvu proto dědí přes `currentColor` a musí se jí říct. Kdyby se
   to vynechalo, vzala by barvu textu vedle sebe. */
.logo__mark {
    width: 72px;
    height: 57px;
    color: var(--yellow);
}

.logo__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.logo__badge {
    display: inline-flex;
    align-items: center;
    height: 25px;
    background: var(--yellow);
    color: var(--black);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 0 7px;
    border-radius: var(--radius-sm);
    letter-spacing: 0;
}

/* Přepínač mobilního menu. Zaškrtávátko + label = menu bez JS;
   public.js jen doplňuje zavření klávesou Esc. */
.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    color: var(--white);
    cursor: pointer;
}

.nav-toggle-label .ico-x,
.nav-toggle:checked ~ .nav-toggle-label .ico-menu {
    display: none;
}

.nav-toggle:checked ~ .nav-toggle-label .ico-x {
    display: inline-block;
}

.p-nav {
    display: none;
}

.nav-toggle:checked ~ .p-nav {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--black);
    border-top: 1px solid var(--border);
    padding: 12px var(--gutter) 24px;
}

.p-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* :not(.btn) je tu schválně — jinak by tahle pravidla (specificita 0,1,1)
   přebila .btn--light (0,1,0) a „Přihlášení" by bylo bílé na bílém. */
.p-nav a:not(.btn) {
    display: block;
    padding: 10px 0;
    color: var(--white);
    font-size: var(--fs-nav);
    font-weight: 500;
}

.p-nav a:not(.btn):hover,
.p-nav a:not(.btn)[aria-current] {
    color: var(--yellow);
    text-decoration: none;
}

.p-nav .btn {
    margin-top: 14px;
}

/* „Odhlásit" je východ, ne cíl — stojí až za tlačítkem „Váš profil"
   a je tlumené, aby o pozornost nesoupeřilo s menu. */
.p-nav a.p-nav__out {
    color: var(--muted);
    font-size: var(--fs-note);
}

.p-nav a.p-nav__out:hover {
    color: var(--white);
}

/* ── Zvoneček upozornění ─────────────────────────────────────────────────── */
/* Je to totéž rozbalovátko jako karta účtu, ale bez rámečku: dvě orámovaná
   tlačítka vedle sebe by v hlavičce vypadala jako dvojí účet. Na mobilu je
   z toho řádek menu jako každý jiný (ikona + popisek). */
.p-nav .acct--bell .acct__btn.bell {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border: 0;
    background: none;
    /* Žlutý natrvalo, ne až pod myší: je to jediná ikona v hlavičce a v tlumené
       šedi mizela mezi textem menu. */
    color: var(--yellow);
}

/* Na mobilu je popisek řádkem menu jako ostatní — bílý, žlutá zůstává
   ikoně. Na širokém okně se popisek schovává úplně. */
.bell__text {
    color: var(--white);
}

/* Obal ikony drží puntík. `line-height: 0` kvůli tomu, aby obal neměl
   výšku řádku textu — jinak by zvoneček seděl nad středem. */
.bell__ico {
    position: relative;
    display: inline-flex;
    line-height: 0;
}

.bell__dot {
    position: absolute;
    right: -3px;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    /* Obrys v barvě pozadí odděluje puntík od čáry zvonečku pod ním. */
    box-shadow: 0 0 0 2px var(--black);
}

/* Zprávy v rozbalovátku. Delší text se zalomí na dva řádky a uřízne —
   menu v hlavičce je náhled, ne seznam. */
.p-nav .acct__menu a.acct__item.zprava {
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
}

.zprava__dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    background: transparent;
}

.zprava--new .zprava__dot {
    background: var(--yellow);
}

.zprava__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.zprava__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    /* Zprávy chodí i z importů a plateb — dlouhé slovo nesmí menu roztáhnout. */
    overflow-wrap: anywhere;
}

/* Přečtená zpráva se netlumí — bylo by to k nepřečtení; pozná se podle
   chybějící tečky. */
.zprava__time {
    color: var(--dim);
    font-size: 12px;
}

/* „Označit vše jako přečtené" je tlačítko ve formuláři, ne odkaz — něco to
   mění. Vypadat má ale jako ostatní řádky menu, takže si bere jejich vzhled
   a shazuje ze sebe vzhled tlačítka. */
.p-nav .acct__menu .acct__akce {
    display: contents;
}

.p-nav .acct__menu button.acct__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-field);
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: var(--fs-note);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.p-nav .acct__menu button.acct__item:hover {
    background: var(--field);
    color: var(--white);
}

.p-nav .acct__menu button.acct__item:hover .ico {
    color: var(--yellow);
}

.acct__prazdno {
    margin: 0;
    padding: 12px 10px;
    color: var(--muted);
    font-size: var(--fs-note);
}

@media (min-width: 62em) {
    .nav-toggle-label {
        display: none;
    }

    .p-nav,
    .nav-toggle:checked ~ .p-nav {
        display: block;
        position: static;
        border: 0;
        padding: 0;
        background: none;
    }

    .p-nav ul {
        flex-direction: row;
        align-items: center;
        gap: 34px;
    }

    .p-nav a:not(.btn) {
        padding: 0;
    }

    /* Žádný vlastní odstup navíc: mezeru drží `gap` seznamu, jinak by
       „Přihlášení" stálo dál od menu (34 + 12) než karta účtu, která je na
       jeho místě u přihlášeného. */
    .p-nav .btn {
        margin-top: 0;
        margin-left: 0;
    }

    .bell__text {
        display: none;
    }

    /* Žádný rámeček ani podklad — jen ikona. Mezeru od menu i od pilulky
       drží `gap` seznamu, výšku srovná `align-items: center`; obal ikony má
       `line-height: 0`, takže se tlačítko nenafoukne o výšku řádku textu
       a zvoneček stojí na stejné ose jako karta účtu vedle. */
    .p-nav .acct--bell .acct__btn.bell {
        justify-content: center;
        padding: 0;
    }

    .acct--bell .acct__menu {
        min-width: 320px;
    }
}

/* Zaměření klávesnicí musí být vidět na všem, ne jen na tlačítkách — a musí
   to být obrys, ne jen změna barvy: u žlutého „Odeslat" by změna barvy nebyla
   poznat vůbec. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.hero :focus-visible {
    outline-color: var(--black);
}

/* ── Tlačítka ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--btn-h);
    padding: 0 var(--btn-pad);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    font-size: var(--fs-btn);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn:hover {
    text-decoration: none;
}

/* Návrh má u všech tlačítek stejný hover: zežloutnou a text zčerná. */
.btn:hover,
.btn:focus-visible {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--black);
}

.btn--light {
    background: var(--white);
    color: var(--black);
}

.btn--dark {
    background: var(--black);
    color: var(--white);
}

.btn--ghost {
    background: var(--field);
    color: var(--white);
}

.btn--primary {
    background: var(--yellow);
    color: var(--black);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: #FFE64D;
    border-color: #FFE64D;
}

.btn--block {
    width: 100%;
}

.hero .btn--light:hover,
.hero .btn--dark:hover {
    /* Na žlutém podkladu by žlutý hover zmizel — prohodíme na černo/bílou. */
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

/* Textový odkaz se šipkou („Stát se členem →“) — v návrhu 22 px, tučný. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--yellow);
    font-weight: 700;
    font-size: var(--fs-link);
    line-height: 1.3;
}

.link-arrow--muted {
    color: var(--muted);
    font-weight: 500;
    font-size: var(--fs-note);
}

.link-arrow--muted:hover {
    color: var(--yellow);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Svislý rytmus je dopočítaný z naměřených účaří: verzálka H1 je 164 px pod
   horní hranou žlutého pásu, tlačítka končí 150 px nad jeho spodní hranou. */
.hero {
    background: var(--yellow);
    color: var(--black);
    text-align: center;
    padding: 64px 0 60px;
}

.hero h1 {
    font-size: var(--fs-hero);
    line-height: var(--lh-hero);
    margin-bottom: 12px;
}

.hero__lead {
    max-width: 46ch;
    margin: 0 auto 12px;
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 1.2;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (min-width: 48em) {
    .hero {
        padding: 151px 0 150px;
    }
}

/* ── Sekce ──────────────────────────────────────────────────────────────── */
.section {
    padding: var(--section-pad) 0;
}

.section--tight {
    padding: 24px 0 0;
}

/* ── Právní text (Ochrana osobních údajů) ───────────────────────────────── */
/* Vlastní sloupec, ne `--container` 1300 px: souvislý text se na takové šířce
   čte mizerně — oko na konci řádku ztrácí, kde začíná další. 70 znaků je
   míra, na které se čte dlouhý text nejlíp.

   Řádkování je 1,55 místo `--lh-body` (1,3). Ten je stavěný na popisky
   a dvouřádkové odstavce v kartách; na odstavci o šesti řádcích je moc
   nahusto. */
.legal {
    max-width: 70ch;
    line-height: 1.55;
}

/* Úvod je perex, ne odstavec — tlumeně, ale ne tak, aby se ztratil. */
.legal__lead {
    font-size: var(--fs-lead);
    color: var(--muted);
}

/* Podnadpisy v textu nejsou nadpisy stránky: výchozí `h2` je 40 px jako `h1`,
   což by uvnitř dokumentu křičelo. Odstup shora je znatelně větší než zdola,
   ať je vidět, že nadpis patří k tomu, co je pod ním. */
.legal h2 {
    margin: 2em 0 .5em;
    font-size: var(--fs-name);
}

.legal ul {
    margin: 0 0 1em;
    padding-left: 1.3em;
}

.legal li {
    margin-bottom: .4em;
}

.legal li::marker {
    color: var(--dim);
}

/* ── Záložky (Člen / Příznivec / …) ─────────────────────────────────────── */
.tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    /* O 3 px víc než v návrhu: záložky jsou teď nižší a potřebují pod sebou
       o kousek víc vzduchu, aby karta nezačínala hned pod nimi. */
    margin-bottom: 24px;
}

.tab {
    display: inline-flex;
    align-items: center;
    height: var(--tab-h);
    padding: 0 var(--tab-pad);
    border-radius: var(--radius);
    background: var(--field);
    color: var(--white);
    font-weight: 600;
    font-size: var(--fs-btn);
    line-height: 1;
    text-decoration: none;
}

.tab:hover {
    background: var(--field-hover);
    text-decoration: none;
}

.tab[aria-current="page"] {
    background: var(--yellow);
    color: var(--black);
}

/* `.tabs--sm` je v šablonách formulářů, ale nic nemění — záložky mají jednu
   velikost na homepage, ve formulářích i na mapě. */

@media (min-width: 40em) {
    .tabs {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
}

/* ── Karta ──────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--card-pad);
}

.card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.card__head h2 {
    margin: 0;
}

.card__lead {
    margin: 9px 0 7px;
    max-width: 105ch;
    color: var(--white);
}

/* Cenovka v rohu karty: 39 px vysoká, text 16 px. */
.badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 39px;
    background: var(--yellow);
    color: var(--black);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    font-size: var(--fs-body);
    /* Cenovka je v návrhu lehčí než okolní nadpisy — naměřeno 400-500. */
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* ── Mřížka vlastností v kartě ──────────────────────────────────────────── */
.features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 43px;
}

/* Ikona 64×64 vlevo, nadpis a text vedle ní — mezera 16 px.
   `align-content: start` je tu nutné: vnější mřížka natáhne všechny sloupce
   na stejnou výšku a bez tohohle by se přebytek rozdělil mezi automatické
   řádky uvnitř. Mezera mezi nadpisem a textem pak nebyla 5 px, ale podle
   sloupce 5 / 15 / 31 px — přesně to „rozjíždění". */
.feature {
    display: grid;
    grid-template-columns: var(--icon) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    align-content: start;
}

.feature__icon {
    color: var(--yellow);
    grid-row: span 2;
    line-height: 0;
}

/* Obrázková ikona hodnoty (mapa Evropy). Výška jako u ikon vedle,
   šířku si dopočítá — mapa je na výšku, čtvercová není. */
.feature__obrazek {
    height: 64px;
    width: auto;
    display: block;
}

/* Velikost ikony řídí token, ne atribut v šabloně — jinak by se při změně
   --icon rozešla ikona s šířkou sloupce, do kterého sedí. */
.feature__icon .ico {
    width: var(--icon);
    height: var(--icon);
}

.feature h3 {
    margin: 0 0 5px;
    align-self: start;
}

.feature p {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.3;
}

@media (min-width: 40em) {
    .features {
        grid-template-columns: repeat(2, 1fr);
        /* 16 px vodorovně: čtyři sloupce pak v obsahu karty (1236 px) sednou
           na rozteč 313 px, jakou má návrh. */
        gap: 32px 16px;
    }
}

@media (min-width: 72em) {
    .features {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Hodnoty ────────────────────────────────────────────────────────────── */
.values {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    /* 45 px od spodní hrany řádku nadpisu = 52 px od jeho účaří, jak měří návrh. */
    margin-top: 45px;
}

@media (min-width: 40em) {
    .values {
        grid-template-columns: repeat(2, 1fr);
        /* 24 px → rozteč 331 px na 1300 px obsahu, jako v návrhu. */
        gap: 36px 24px;
    }
}

@media (min-width: 72em) {
    .values {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Formuláře ──────────────────────────────────────────────────────────── */
.form-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
}

@media (min-width: 64em) {
    /* Odměřeno na obou rámech: karta má rámeček na 502 a 1063, postranní
       sloupec začíná na 1083 a obsah končí na 1418 (= 916 na střed).
       Dřív tu byla mezera 134 px — to byl omyl, sloupec tím vyšel příliš úzký
       a odsazený od karty. */
    .form-layout {
        grid-template-columns: minmax(0, 561px) minmax(0, 335px);
        gap: 20px;
    }
}

/* Rozteč řádků je v návrhu 81 px od horní hrany pole k horní hraně dalšího,
   mezera mezi sloupci 11 px (3 × 159 px + 2 × 11 = 499). */
.field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    margin-bottom: 24px;
}

@media (min-width: 40em) {
    .field-row--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .field-row--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.field {
    display: block;
    min-width: 0;
}

/* Popisek je buď `<span>` uvnitř `<label>`, nebo samostatný `<label for>` —
   pole s našeptávačem nesmí být zabalené v labelu, protože klik do seznamu
   návrhů by vracel zaměření zpátky do inputu. */
.field > span,
.field > label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--fs-note);
    line-height: 1;
    color: var(--white);
}

/* Pole má v návrhu 39 px, ne dopočítanou výšku z odsazení.
   `display: block` je tu nutné: jako inline-block pole sedí na účaří řádku
   a pod ním zbude místo na dolní dotažnice — u textarey to dělalo 5 px navíc
   a celý zbytek formuláře se posunul dolů. */
.field input,
.field textarea,
.field select {
    display: block;
    width: 100%;
    height: 39px;
    background: var(--field);
    border: 1px solid transparent;
    border-radius: var(--radius-field);
    color: var(--white);
    font: inherit;
    font-size: var(--fs-body);
    padding: 0 14px;
}

.field textarea {
    height: 70px;
    min-height: 70px;
    padding: 9px 14px;
    line-height: 1.3;
    resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--yellow);
    background: var(--field-hover);
}

/* :user-invalid, ne :invalid — prázdné povinné pole je „invalid" hned po
   načtení stránky a formulář by se červenal dřív, než do něj někdo sáhne. */
.field input:user-invalid,
.field textarea:user-invalid {
    border-color: var(--danger);
}

/* Úzké pole („Výše příspěvku") má v návrhu 199 z 500 px obsahu karty. */
.field--narrow input {
    max-width: 199px;
}

/* Zaškrtávátko je v návrhu o 3 px blíž poslednímu poli, než jsou pole mezi
   sebou (21 px místo 24). */
.field-row + .check {
    margin-top: -3px;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 19px;
    font-size: var(--fs-note);
    cursor: pointer;
}

.check input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--yellow);
}

/* Odkaz pod zaškrtávátkem souhlasu (Ochrana osobních údajů).

   **Nesmí být uvnitř `<label>`** — kliknutí na odkaz by zároveň přepnulo
   zaškrtávátko, protože label aktivuje svůj ovládací prvek. Proto stojí
   samostatně pod ním a odsazení 26 px (16 px zaškrtávátko + 10 px mezera)
   ho srovná pod text souhlasu. Záporný horní okraj ruší mezeru, kterou má
   `.check` pod sebou: odkaz patří k zaškrtávátku, ne k dalšímu prvku. */
.check__odkaz {
    margin: -15px 0 19px;
    padding-left: 26px;
    font-size: var(--fs-note);
}

/* Odsazení se slučuje s margin-bottom posledního zaškrtávátka → 22 px. */
.form-actions {
    margin-top: 22px;
}

/* Odeslat je v návrhu nižší než tlačítka na homepage a má menší zaoblení. */
.form-actions .btn {
    height: 39px;
    border-radius: var(--radius-field);
}

.form-foot {
    margin-top: 14px;
    text-align: right;
}

/* Karta formuláře má v návrhu odsazení 30 px (na homepage je 32). */
.container--narrow .card {
    padding: 30px;
}

/* Chybová hláška nad formulářem */
.alert {
    border: 1px solid var(--border);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius);
    background: rgba(255, 68, 102, .08);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: var(--fs-small);
}

.alert--success {
    border-left-color: var(--success);
    background: rgba(53, 208, 127, .08);
}

.alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

/* ── Přihlášení ────────────────────────────────────────────────────────── */
/* Karta je v návrhu 561 px na střed okna, stejně široká jako karta formuláře.
   Návrh ji má o kousek výš než na střed (225 px nad, 307 pod); svisle na střed
   je to blíž než pevné odsazení, které by na nízkém okně vytlačilo kartu ven. */
.login {
    display: grid;
    align-content: center;
    flex: 1 0 auto;
    padding: 60px 0;
}

.login__box {
    width: 100%;
    max-width: 561px;
    margin: 0 auto;
}

.login__box > h1 {
    margin-bottom: 22px;
}

.login__box .card {
    padding: 30px;
}

.login__alt {
    margin-top: 10px;
}

.login__alt .btn {
    height: 39px;
    border-radius: var(--radius-field);
    font-weight: 500;
}

.login__foot {
    margin: 20px 0 0;
    text-align: right;
}

/* ── Adresa s našeptávačem ─────────────────────────────────────────────── */
.address {
    position: relative;
}

/* Místo pro vykřičník vpravo v poli, ať se text nedostane pod něj. */
.address input.is-unverified {
    padding-right: 40px;
    border-color: var(--yellow);
}

.address__flag {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--black);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.address__note {
    margin: 6px 0 0;
    color: var(--yellow);
    font-size: var(--fs-note);
    line-height: 1.3;
}

.address__list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 244px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* Ne --surface: seznam leží nad kartou a musí se od ní odlišit. */
    background: var(--field);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.address__item {
    padding: 9px 10px;
    border-radius: var(--radius-field);
    font-size: var(--fs-small);
    line-height: 1.25;
    cursor: pointer;
}

.address__item.is-active,
.address__item:hover {
    background: var(--yellow);
    color: var(--black);
}

/* ── Postranní sloupec u formuláře ─────────────────────────────────────── */
/* Řádkování 19 px na 15px písmu, mezera mezi odstavci 19 px — obojí naměřené. */
.aside p {
    margin: 0 0 19px;
    color: var(--muted);
    font-size: var(--fs-small);
    line-height: 1.27;
}

/* ── Průběh (Výběr → Vyplnění → Hotovo) ────────────────────────────────── */
.stepper {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}

/* Na darech je průběh jediný obsah postranního sloupce a začíná rovnou
   u horní hrany karty. */
.stepper:first-child {
    margin-top: 0;
}

/* Rozteč kroků je 81 px od kolečka ke kolečku, kolečko má 30 px (ne 20)
   a text začíná 35 px od jeho levé hrany. */
.stepper li {
    position: relative;
    min-height: 30px;
    padding: 0 0 41px 35px;
}

.stepper li:last-child {
    padding-bottom: 0;
}

/* Kolečko kroku */
.stepper li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--yellow);
}

/* Tečkovaná spojnice mezi kroky */
.stepper li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 36px;
    bottom: 6px;
    border-left: 2px dotted var(--yellow);
}

.stepper li.is-done::before {
    background: var(--yellow);
}

.stepper li.is-current::before {
    box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 14px var(--yellow);
}

.stepper b {
    display: block;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 1.2;
    color: var(--white);
}

.stepper span {
    font-size: var(--fs-note);
    color: var(--yellow);
}

/* ── Upozornění místo formuláře (záložka Člen) ─────────────────────────── */
.notice p {
    margin-bottom: 16px;
}

.notice__foot {
    text-align: right;
}

/* Patička drží spodní hranu okna i na krátké stránce (poděkování). */
body.public {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

body.public > main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

/* ── Poděkování ─────────────────────────────────────────────────────────── */
/* V návrhu je blok poděkování zhruba uprostřed volné plochy pod hlavičkou
   (rám nemá patičku). Místo pevného odsazení proto stránku vycentrujeme —
   vypadá to stejně a nerozpadne se to na jiné výšce okna. */
.thanks {
    display: grid;
    align-content: center;
    justify-items: center;
    flex: 1 0 auto;
    text-align: center;
    padding: 96px 0 110px;
}

.thanks h1 {
    margin-bottom: 16px;
}

.thanks p {
    color: var(--yellow);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.22;
    max-width: 46ch;
    margin: 0 auto 20px;
}

.thanks__mark {
    width: 81px;
    height: 63px;
    color: var(--yellow);
}

@media (min-width: 48em) {
    .thanks {
        padding: 150px 0 160px;
    }
}

/* Obsah poděkování je ve `.container`, ale mřížkové centrování potřebuje,
   aby se blok nenatáhl na celou šířku. */
.thanks > .container {
    width: 100%;
}

/* ── Patička ────────────────────────────────────────────────────────────── */
/* Bez margin-top — odstup shora dělá odsazení poslední sekce, jako v návrhu. */
.p-footer {
    background: var(--black);
    padding: 40px 0;
}

.p-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.p-footer .logo {
    color: var(--muted);
}

/* Značka v patičce je v návrhu odbarvená. */
/* Patička je tlumená; filtr sedne na obrázek stejně jako sedl na vektor. */
.p-footer .logo__full {
    filter: grayscale(1) brightness(1.6) opacity(.55);
}

.p-footer .logo__badge {
    background: var(--field);
    color: var(--muted);
}

.p-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.p-footer__links a {
    color: var(--muted);
    font-size: var(--fs-note);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.p-footer__links a:hover {
    color: var(--yellow);
}

@media (min-width: 48em) {
    .p-footer {
        padding: 76px 0;
    }

    .p-footer__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ── Lidé, orgány, týmy ─────────────────────────────────────────────────── */
.people-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
}

@media (min-width: 62em) {
    .people-layout {
        /* Postranní sloupec 222 px + mezera 30 px; hlavní sloupec pak začíná
           na 561 px a vyjdou v něm čtyři dlaždice po 239 px s mezerou 30 px. */
        grid-template-columns: 222px minmax(0, 1fr);
        gap: 30px;
    }
}

/* Odstup drobečku od „Orgány" je v návrhu 53 px od účaří k účaří. */
.people-side__crumb {
    margin: 0 0 28px;
    font-size: var(--fs-small);
    color: var(--muted);
}

.people-side__crumb a {
    color: var(--muted);
}

/* Mezera pod „Orgány" je v návrhu 47 px od účaří nadpisu k účaří prvního
   odkazu; s 10 px vycházelo jen 42 a působilo to nalepeně. */
/* 22 px shora mezi skupinami, 19 px pod nadpis skupiny — obojí dopočítané
   z účaří v návrhu (53 px nadpis→odkaz, 63 px poslední odkaz→další nadpis). */
.people-side__group {
    margin: 22px 0 19px;
    font-size: var(--fs-h2);
    color: var(--dim);
}

.people-side__group:first-of-type {
    margin-top: 0;
}

.people-side__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Odkazy jsou 20 px, ne 22 — verzálka „K" má v návrhu 15 px (15 / 0,7275).
   Rozteč 35 px od účaří k účaří dá 20 × 1,25 + 2 × 5 px odsazení. */
.people-side__list a {
    display: block;
    padding: 5px 0;
    color: var(--white);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
}

.people-side__list a:hover,
.people-side__list a[aria-current] {
    color: var(--yellow);
    text-decoration: none;
}

.h1-accent {
    color: var(--yellow);
}

/* Popis orgánu využívá celý sloupec a je o stupeň menší než text v kartách —
   z šířky řádku v návrhu (1043 px) vychází 15,5 px. Při 16 px se zalomil
   o řádek navíc a všechno pod ním se posunulo o 21 px dolů. */
.people-main__lead {
    max-width: none;
    font-size: var(--fs-small);
}

/* „Členi:" a „Publikace:" jsou v návrhu 20 px, ne velikost podnadpisu.
   Byly o polovinu větší, než mají být. */
.people-main__sub {
    margin: 22px 0 12px;
    font-size: 20px;
    font-weight: 600;
}

.people-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* Rozteč řad je v návrhu 382 px: dlaždice (240 fotka + jméno + tři řádky
       popisku ≈ 331) a 50 px mezera. */
    gap: 50px 30px;
}

/* Na stránce orgánu je fotka menší a text vedle ní, ne pod ní.
   Tři sloupce po 335 px s mezerou 22 px, řady po 98 px. */
.people-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 21px 22px;
}

.person__link {
    display: block;
    color: inherit;
}

/* Bez tohohle by se jméno pod fotkou podtrhlo (globální `a:hover`). */
.person__link:hover {
    text-decoration: none;
}

.person__body {
    display: block;
}

/* Rámeček drží rozměr a ořezává; obsah se v něm hýbe při najetí myší.
   `overflow: hidden` je nutné i bez animace: bez něj obsah přetlačí
   aspect-ratio a z čtverce je obdélník (u malé dlaždice u orgánu to dělalo
   58×62 místo 58×58). */
.person__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--yellow);
    border-radius: var(--radius);
}

.person__photo > * {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

/* Bez fotky: stejné místo, iniciály uprostřed — mřížka se nerozjede. */
.person__photo--empty {
    color: var(--black);
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.person__photo--empty > span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.people-grid--compact .person__photo--empty {
    font-size: 22px;
}

/* Jméno začíná 16 px pod fotkou (měřeno od účaří verzálky). */
.person__name {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    font-size: var(--fs-name);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.person__link:hover .person__name {
    color: var(--yellow);
}

.person__note {
    display: block;
    margin: 0;
    font-size: var(--fs-note);
    line-height: 1.21;
    color: var(--muted);
}

/* Fotka u orgánu je 58×58 s mezerou 13 px — ne 88, jak tu bylo.
   Mřížka sedí na odkazu, ne na položce seznamu: jméno a popisek tvoří jeden
   blok vedle fotky, takže je její výška nerozstrčí do dvou řádků mřížky. */
.people-grid--compact .person__link {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 13px;
    align-items: start;
}

.people-grid--compact .person__name {
    margin-top: 0;
    font-size: 22px;
    color: var(--yellow);
}

/* Najetí myší: místo podtržení se obrázek nakloní o stupeň a o tři procenta
   povyroste. Hýbe se **obsah uvnitř rámečku**, ne rámeček — dlaždice si drží
   rozměr a mřížka se nehne. Stejně se chová fotka člověka i náhled publikace.
   `backface-visibility` je tu kvůli WebKitu: bez něj otočený obrázek poblikává. */
.person__link:hover .person__photo > *,
.person__link:focus-visible .person__photo > *,
.publication__cover:hover img,
.publication__cover:focus-visible img,
.publication__cover:hover .publication__placeholder,
.publication__cover:focus-visible .publication__placeholder {
    transform: rotate(-1deg) scale(1.03);
    backface-visibility: hidden;
}

/* Kdo si vypnul animace, dostane obrázek v klidu. */
@media (prefers-reduced-motion: reduce) {
    .person__photo > *,
    .publication__cover img,
    .publication__cover .publication__placeholder {
        transition: none;
        transform: none;
    }
}

/* ── Detail osoby ───────────────────────────────────────────────────────── */
/* align-items: start — jinak by se čtvercová dlaždice bez fotky natáhla
   na výšku celého řádku a přestala být čtverec. */
/* Na detailu osoby je drobeček těsně nad fotkou (8 px), v seznamu má nad
   „Orgány" mezeru 28 px. */
.person-detail > .people-side__crumb {
    margin-bottom: 8px;
}

.person-detail__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 52px;
}

@media (min-width: 48em) {
    /* Fotka je na detailu 250×250 a text vedle ní začíná 21 px za ní. */
    .person-detail__head {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 21px;
    }
}

.person-detail__head .person__photo {
    max-width: 250px;
}

/* Jméno na detailu je větší než nadpis stránky: ověřeno šířkou nápisu
   („Tomáš Roud" má 294 px, tedy přesně 50/26 oproti dlaždici v seznamu).
   Účaří jména sedí 4 px pod horní hranou fotky, ne přesně s ní. */
.person-detail__meta h1 {
    margin: 4px 0 11px;
    font-size: var(--fs-person);
}

/* Řádky v hlavičce osoby jdou po 29 px (řádek 20,8 + 8 mezera). */
.person-detail__meta p {
    margin-bottom: 8px;
}

.person-detail__status {
    color: var(--yellow);
    font-weight: 600;
}

.person-detail__label {
    margin: 8px 0 5px;
    font-size: var(--fs-body);
    color: var(--muted);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* Štítek sítě má v návrhu 27 px na výšku. */
.chip {
    display: inline-flex;
    align-items: center;
    height: 27px;
    background: var(--white);
    color: var(--black);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    font-size: var(--fs-note);
    font-weight: 600;
}

/* Jen odkaz. Štítky v portálu („Otevřený", „Zamítnuto", „Začne …") jsou
   obyčejné `<span>` — nikam nevedou, takže se pod myší nesmí chovat jako
   tlačítko. */
a.chip:hover {
    background: var(--yellow);
    text-decoration: none;
}

.chips--plain {
    gap: 14px;
}

.chips--plain a {
    color: var(--white);
    font-size: var(--fs-note);
}

.chips--plain a:hover {
    color: var(--yellow);
}

/* „Životopis:" je v návrhu stejně velký jako nadpis stránky (40 px), ne h2. */
.person-detail__bio-title {
    margin-bottom: 8px;
    font-size: var(--fs-h1);
}

/* Návrh má řádkování 1,2 jako všude jinde, ale životopis je jediný dlouhý
   souvislý text na webu a při 1,2 se čte špatně. Držíme 1,5 schválně. */
.person-detail__bio {
    max-width: none;
    line-height: 1.5;
}

/* ── Publikace orgánů ───────────────────────────────────────────────────── */
/* Sloupce mají v návrhu pevných 400 px s mezerou 40 px, ne roztažené 1fr. */
.publications {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 400px));
    gap: 34px 40px;
}

.publication__cover {
    display: block;
    /* 400×225 v návrhu. */
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--field);
}

.publication__cover img,
.publication__cover .publication__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.publication__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--yellow);
}

.publication__date {
    margin: 12px 0 2px;
    font-size: var(--fs-note);
    color: var(--muted);
}

.publication__title {
    margin: 0 0 5px;
    font-size: 24px;
}

.publication__title a {
    color: var(--yellow);
}

.publication__note {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.3;
    color: var(--muted);
}

/* ── Mapa ───────────────────────────────────────────────────────────────── */
/* Stránka mapy je jediná, která se neroluje: mapa vyplní zbytek okna pod
   hlavičkou a patička se nevykresluje vůbec (šablona přepisuje `block footer`).
   Výška se nepočítá, ale nechá dopočítat mřížce — jinak by případná hláška nad
   mapou stránku o svou výšku prodloužila a vyrobila rolování. */
body.public--map {
    height: 100svh;
    overflow: hidden;
}

body.public--map > main {
    min-height: 0;
}

.map-page {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.map-canvas {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--field);
}

/* Lišta filtrů leží v návrhu uvnitř obsahového sloupce (1300 px) a je
   zarovnaná k jeho pravé hraně, 21 px pod hlavičkou. */
.map-filters {
    position: absolute;
    /* Leafletí vrstvy sedí na z-indexu 400–700, ovládací prvky na 1000.
       S nižší hodnotou se filtry schovají pod mapu. */
    z-index: 1000;
    top: 21px;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--container), 100% - 2 * var(--gutter));
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 11px;
}

/* Piluly na mapě jsou stejné jako záložky, jen tmavší kvůli podkladu. */
.map-filter,
.map-search input {
    height: var(--tab-h);
    font-size: var(--fs-btn);
    border-radius: var(--radius);
}

/* Text v pilulce je v návrhu polotučný, ne tučný. Ověřeno šířkou celých
   pilulek: při 600 vyjdou 109/156/159/140/145 px přesně jako v návrhu,
   při 700 jsou o 4 px širší. */
.map-filter {
    border: 0;
    cursor: pointer;
    background: var(--black);
}

.map-filter[aria-pressed="true"] {
    background: var(--yellow);
    color: var(--black);
}

.map-search {
    flex: 1 1 220px;
    max-width: 348px;
}

/* Na telefonu se filtry lámaly do pěti řádků a zabraly čtvrtinu mapy. Radši
   jeden řádek, který se posouvá do strany. */
@media (max-width: 47.99em) {
    .map-filters {
        /* Zarovnání doprava se tu musí zrušit: v posouvatelném řádku by
           přetekly doleva a na začátek seznamu by se nešlo dostat. */
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        /* Odsazení uvnitř, aby poslední pilulka nekončila na hraně okna. */
        padding-bottom: 4px;
    }

    .map-filters::-webkit-scrollbar {
        display: none;
    }

    .map-filter {
        flex: none;
    }

    .map-search {
        flex: none;
        width: 220px;
    }
}

.map-search input {
    width: 100%;
    background: var(--black);
    border: 0;
    color: var(--white);
    font: inherit;
    padding: 0 20px;
}

.map-search input:focus {
    outline: 2px solid var(--yellow);
}

/* Leaflet si bubliny stylizuje sám — sjednotíme je s tmavým tématem. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--black);
    color: var(--white);
}

.leaflet-popup-content p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: var(--fs-note);
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Portál člena (neveřejná část)

   Stejný stylopis jako veřejná část — v návrhu je to jeden web, jen s jiným
   menu. Odsazení sekce je odměřené z rámu „Nastavení": fotka začíná 76 px
   pod hlavičkou, obsah končí 52 px nad patičkou.
   ═══════════════════════════════════════════════════════════════════════════ */
.portal {
    padding: 48px 0 52px;
}

@media (min-width: 62em) {
    .portal {
        padding: 76px 0 52px;
    }
}

.portal-layout {
    display: grid;
    /* minmax(0,1fr), ne 1fr: široká tabulka uvnitř by jinak jednosloupcovou
       mřížku roztáhla a stránka by na telefonu ujížděla do strany. */
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media (min-width: 62em) {
    /* Sloupec 230 + mezera 21 posadí obsah na 561 px, jak měří návrh. */
    .portal-layout {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 21px;
    }
}

/* ── Postranní rozcestník ───────────────────────────────────────────────── */
.portal-side__title {
    margin: 0 0 12px;
    color: var(--dim);
    font-size: var(--fs-h2);
}

.portal-side__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-side__list a {
    display: block;
    padding: 5px 0;
    color: var(--white);
    font-size: 20px;
    line-height: 1.25;
}

.portal-side__list a:hover,
.portal-side__list a[aria-current] {
    color: var(--yellow);
    text-decoration: none;
}

/* ── Profil: fotka + formulář ───────────────────────────────────────────── */
/* `align-content: start` je tu ze stejného důvodu jako u `.feature` —
   bez něj by vnější mřížka rozdala přebytek výšky do automatických řádků
   a rozestupy by se rozjely. */
.portal-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    align-content: start;
    margin-bottom: 51px;
}

@media (min-width: 48em) {
    .portal-profile {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 20px;
    }
}

.portal-profile__aside .person__photo {
    max-width: 250px;
}

/* Jméno pod profilovkou. Je to zároveň nadpis sloupce a vstup do okna
   Detaily — proto vypadá jako text, ne jako odkaz, a prozradí se až
   podtitulkem a najetím myší. */
.portal-profile__name {
    display: block;
    margin: 14px 0 0;
    color: var(--white);
    font-size: var(--fs-name);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.portal-profile__name:hover {
    color: var(--yellow);
    text-decoration: none;
}

.portal-profile__more {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--fs-note);
    font-weight: 400;
    letter-spacing: 0;
}

.portal-profile__name:hover .portal-profile__more {
    color: var(--yellow);
}

.portal-profile__id {
    margin: 20px 0 0;
    font-size: var(--fs-body);
    line-height: 1.2;
}

.portal-profile__id span {
    display: block;
    color: var(--muted);
    word-break: break-all;
}

/* Pole s tlačítkem vedle sebe („Vaše jméno" + Požádat o změnu). */
.field-row--action {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

@media (max-width: 39.99em) {
    .field-row--action {
        grid-template-columns: 1fr;
    }
}

/* Tlačítko v řádku pole má výšku pole, ne výšku běžného tlačítka. */
.btn--field {
    height: 39px;
    padding: 0 16px;
    border-radius: var(--radius-field);
}

/* Drobné tlačítko vedle údaje („Požádat o změnu" v Detailech účtu).
   Nesmí přerůst hodnotu, u které stojí, ale musí zůstat klikatelné. */
.btn--sm {
    height: 30px;
    padding: 0 12px;
    border-radius: var(--radius-field);
    font-size: var(--fs-note);
    font-weight: 500;
}

/* Údaje, které si člen nemění sám (jméno, datum narození) — ať je vidět,
   že to není překlep, ale záměr. */
.field input[readonly] {
    color: var(--muted);
    cursor: not-allowed;
}

/* Předěl ve formuláři. Stejný na přihlášení i v profilu. */
.form-sep {
    height: 0;
    margin: 0 0 24px;
    border: 0;
    border-top: 1px solid var(--field);
}

.portal-note {
    margin: -10px 0 20px;
    color: var(--muted);
    font-size: var(--fs-note);
    line-height: 1.35;
}

.portal-note b {
    color: var(--white);
}

/* ── Tabulka v kartě ────────────────────────────────────────────────────── */
/* Karta nemá vodorovné odsazení — zvýrazněný řádek má v návrhu dosahovat
   až k jejím hranám. Odsazení 30 px nesou buňky. */
.table-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 30px 0;
    overflow-x: auto;
}

.table-card__empty {
    margin: 0;
    padding: 0 30px;
    color: var(--muted);
}

.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.table th {
    padding: 0 30px 18px;
    color: var(--muted);
    font-size: var(--fs-small);
    font-weight: 500;
    text-align: left;
}

/* Řaditelná hlavička. Odkaz dědí vzhled popisku — nemá vypadat jako odkaz
   do textu, jen napovědět šipkou, že se dá kliknout. */
.table__sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.table__sort:hover,
.table__sort:focus-visible {
    color: var(--white);
}

.table__arrow {
    font-size: 11px;
    line-height: 1;
    opacity: .5;
}

.table__sort.is-sorted {
    color: var(--white);
}

.table__sort.is-sorted .table__arrow {
    opacity: 1;
    color: var(--yellow);
}

.table td {
    height: 39px;
    padding: 0 30px;
    font-size: var(--fs-body);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table tbody tr:hover {
    background: var(--field);
}

@media (max-width: 47.99em) {
    /* Na mobilu se tabulka posouvá do strany, ať se sloupce nesmáčknou. */
    .table {
        table-layout: auto;
        min-width: 560px;
    }
}

/* ── Karta nastavení (Veřejný profil, Propojení účtů, Mentor) ───────────── */
/* Šířka 561 px je stejná jako u karty formuláře a přihlášení — v návrhu jsou
   všechna tahle okna jeden a ten samý blok. */
.portal-card {
    max-width: 561px;
    padding: 30px;
}

.portal-card__title {
    margin: 0 0 20px;
    font-size: var(--fs-h2);
}

/* Tlačítko v řádku formuláře se nesmí roztáhnout přes celý sloupec mřížky. */
.field-row > .btn {
    justify-self: start;
}

/* Popisek mimo <label> (u tlačítka „Nastavit mapu"). */
.field__label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--fs-note);
    line-height: 1;
    color: var(--white);
}

.portal-hint {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: var(--fs-note);
    line-height: 1.35;
}

/* Vysvětlivka se drží pole nad sebou (6 px) a dolů žádnou mezeru nemá.
   Když po ní něco následuje, musí si odstup vzít to následující — jinak
   popisek dalšího pole nalepne rovnou na vysvětlivku. 24 px je stejný
   rozestup, jaký mají řádky formuláře mezi sebou. */
.portal-hint + .field-row,
.portal-hint + .check,
.portal-hint + .form-sep,
.portal-hint + form,
.portal-hint + .alert {
    margin-top: 24px;
}

/* Vysvětlivka **za** celým formulářem je poznámka pod čarou, ne popisek
   pole — nesmí se lepit na odesílací tlačítko. */
form + .portal-hint {
    margin-top: 22px;
}

/* Vysvětlivka nad kartou je úvod stránky, ne popisek pole — karta pod ní
   potřebuje víc vzduchu než řádek ve formuláři. */
.portal-hint + .card {
    margin-top: 22px;
}

/* V bloku s fotkou je vysvětlivka a „Fotku odebrat" jeden sloupeček těsně
   pod sebou — tam se odstup řádku formuláře nehodí. */
.photo-field .portal-hint + .check {
    margin-top: 0;
}

.portal-hint--foot {
    max-width: 561px;
    margin-top: 14px;
}

/* Životopis a „co nabízím" jsou delší texty než „Pár vět o Vás". */
.textarea--tall {
    height: 120px;
    min-height: 120px;
}

/* Náhled fotky vedle výběru souboru. */
.photo-field {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.photo-field__preview .person__photo {
    width: 90px;
}

.field input[type="file"] {
    padding: 8px 10px;
    height: auto;
    font-size: var(--fs-note);
}

.field input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--radius-field);
    background: var(--field-hover);
    color: var(--white);
    font: inherit;
    font-size: var(--fs-note);
    cursor: pointer;
}

/* ── Okna Nastavení ─────────────────────────────────────────────────────── */
/* Nativní <dialog>: `showModal()` sám zamkne pozadí, zaměří okno a obslouží
   Esc. Vlastní vzhled prvku se musí celý přebít — prohlížeč mu dává rámeček,
   bílou výplň a odsazení. */
.modal {
    width: min(561px, calc(100% - 2 * var(--gutter)));
    max-width: 561px;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    overflow: visible;
}

/* Rozmazané a ztmavené pozadí, aby okno nerušil zbytek obrazovky.
   `backdrop-filter` starší prohlížeče neumí — tam zůstane samotné ztmavení,
   což je pořád dost. */
.modal::backdrop {
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(6px);
}

/* Karta uvnitř. Výplň má stejnou jako stránka, od pozadí ji odděluje rámeček
   a stín — přesně jako „popupy" v návrhu. */
.modal__box {
    position: relative;
    max-height: calc(100svh - 2 * var(--gutter));
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-field);
    background: none;
    color: var(--muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.modal__close:hover {
    background: var(--field);
    color: var(--white);
}

/* Nadpis se nesmí schovat pod křížek. */
.modal__box .portal-card__title {
    padding-right: 40px;
}

/* Okno naběhne, ať to nepráskne. @starting-style je potřeba proto, že
   display: none -> block se jinak nedá animovat. */
.modal[open] {
    animation: modal-in .18s ease-out;
}

.modal[open]::backdrop {
    animation: backdrop-in .18s ease-out;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .modal[open],
    .modal[open]::backdrop {
        animation: none;
    }
}

/* ── Seznamy a hlasování ────────────────────────────────────────────────── */
/* Řádek nad obsahem: hledání, tlačítko, přepínač. Pole i tlačítka mají výšku
   pole (39 px), ne tlačítka — tak to měří návrh na liště nad kartami. */
.portal-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.portal-search input[type="search"] {
    width: 253px;
    max-width: 100%;
    height: 39px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-field);
    background: var(--field);
    color: var(--white);
    font: inherit;
    font-size: var(--fs-body);
}

.portal-search input[type="search"]:focus {
    outline: none;
    border-color: var(--yellow);
    background: var(--field-hover);
}

/* Rozbalovátko vedle hledání (filtr míst kandidatury). Stejné hodnoty jako
   pole vedle něj — bez toho vypadá jako nativní prvek z jiného webu. */
.portal-search select {
    height: 39px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-field);
    background: var(--field);
    color: var(--white);
    font: inherit;
    font-size: var(--fs-body);
}

.portal-search select:focus {
    outline: none;
    border-color: var(--yellow);
    background: var(--field-hover);
}

.portal-search__clear {
    color: var(--muted);
    font-size: var(--fs-note);
}

/* Nadpis s tlačítkem vpravo („Hlasování:" + „+ Hlasování"). */
.portal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.portal-head h1 {
    margin: 0;
}

/* Stránkování seznamů. */
.pager {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.pager__stav {
    color: var(--muted);
    font-size: var(--fs-note);
}

/* ── Karta hlasování ────────────────────────────────────────────────────── */
/* Karta v přehledu je jeden řádek: název (s popisem), vpravo termín nebo
   počet členů a stav. Podrobnosti patří na detail, ne do seznamu. */
.vote-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    margin-bottom: 10px;
}

.vote-card__main {
    flex: 1 1 260px;
    min-width: 0;
}

.vote-card__title {
    margin: 0;
    font-size: var(--fs-name);
    line-height: 1.2;
}

.vote-card__title a {
    color: var(--white);
}

.vote-card__title a:hover {
    color: var(--yellow);
    text-decoration: none;
}

.vote-card__when {
    flex: none;
    color: var(--muted);
    font-size: var(--fs-small);
}

/* Pilulka „Hlasovat →" — jediné místo, kde má tlačítko kulaté konce. */
.btn--pill {
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
}

/* Stavové štítky. Barvy z návrhu: schváleno svítivě zelená, zamítnuto
   červená, rozpracované šedé. Text je vždycky černý — na světlém podkladu. */
.chip--ok,
.chip--no,
.chip--wait {
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: var(--fs-small);
    font-weight: 500;
}

.chip--ok   { background: #94FF66; color: var(--black); }
.chip--no   { background: #FF7A8A; color: var(--black); }
.chip--wait { background: var(--field); color: var(--white); }

/* ── Detail hlasování ───────────────────────────────────────────────────── */
.portal-crumb {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.portal-crumb p {
    margin: 0;
}

.portal-crumb span {
    color: var(--muted);
}

.portal-crumb__when {
    flex: none;
    color: var(--white);
    font-size: var(--fs-body);
}

.vote-detail__by {
    margin: 0 0 14px;
}

.vote-detail__by span {
    color: var(--muted);
}

.vote-detail__label {
    margin: 28px 0 8px;
    font-size: var(--fs-lead);
}

.vote-detail__text {
    max-width: 100ch;
    color: var(--muted);
}

.vote-form {
    margin: 8px 0 8px;
}

.vote-form__options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.vote-form .check {
    margin-bottom: 0;
    font-size: var(--fs-body);
}

.vote-result {
    margin-bottom: 18px;
}

.vote-result__head {
    margin: 0 0 8px;
    color: var(--muted);
}

.vote-result__head b {
    color: var(--white);
}

.vote-result__people {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Hlasující jsou v návrhu kolečka 40 px. */
.vote-result__people .person__photo {
    width: 40px;
    border-radius: 50%;
}

/* ── Detail hlasování ───────────────────────────────────────────────────── */
/* Vzhled podle předlohy od uživatele: vlevo hlavička a obsah, vpravo karta
   s kruhem a rozpadem hlasů. */
.vote-back {
    margin: 0 0 18px;
}

.vote-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: var(--fs-body);
}

.vote-back a:hover {
    color: var(--white);
    text-decoration: none;
}

.vote-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}

.vote-flags .chip {
    height: 34px;
    padding: 0 16px;
    font-size: var(--fs-body);
}

.chip--plain {
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--white);
    font-size: var(--fs-body);
}

.vote-title {
    margin: 0 0 28px;
}

.vote-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (min-width: 62em) {
    .vote-layout {
        grid-template-columns: minmax(0, 1fr) 440px;
    }
}

/* Pruh s termíny. */
.vote-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    margin: 0 0 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 22px 24px;
}

@media (min-width: 48em) {
    .vote-meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vote-meta dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: var(--fs-note);
}

.vote-meta dd {
    margin: 0;
    font-size: var(--fs-body);
}

/* Rozbalovací sekce (Popis, Kdo jak hlasoval). */
.vote-section {
    margin-bottom: 28px;
}

.vote-section summary {
    cursor: pointer;
    list-style: none;
}

.vote-section summary::-webkit-details-marker {
    display: none;
}

.vote-section summary h2,
.vote-section > h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: var(--fs-lead);
}

/* Šipka se otáčí podle toho, jestli je sekce otevřená. */
.vote-section summary h2::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}

.vote-section[open] summary h2::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.vote-section__text {
    max-width: 100ch;
    color: var(--muted);
}

/* ── Karta s výsledkem ──────────────────────────────────────────────────── */
.vote-tally,
.vote-proposer {
    padding: 24px;
}

.vote-proposer {
    margin-top: 20px;
}

.vote-proposer p {
    margin: 0;
    color: var(--muted);
}

.vote-tally__title {
    margin: 0 0 20px;
    font-size: var(--fs-lead);
}

/* Kruh je čistě CSS: conic-gradient a díra uprostřed. Bez skriptu a bez SVG. */
.donut {
    position: relative;
    display: grid;
    place-items: center;
    width: 210px;
    height: 210px;
    margin: 0 auto 20px;
    border-radius: 50%;
    /* Výseče skládá server (`PortalVoteService::ring`), tady se jen vykreslí. */
    background: conic-gradient(var(--vysece, var(--field) 0 100%));
}

/* Barvy jednotlivých možností. Slovník drží originál
   (`ElectionService::createDefaultElectionOptions`): Pro, Zdržel se,
   Proti (veto). „Proti" bez veta a jména kandidátů mají vlastní barvu,
   aby se nepletly s ničím z toho. */
:root {
    --hlas-ano:    #35D07F;
    --hlas-zdrzel: #A0A0A0;
    --hlas-proti:  #FF7A8A;
    --hlas-veto:   #B06BFF;
    --hlas-jiny:   #FED801;

    /* Kandidáti ve volbě do role — musí jít rozeznat mezi sebou. */
    --hlas-jiny-1: #FED801;
    --hlas-jiny-2: #4DA3FF;
    --hlas-jiny-3: #FF9F43;
    --hlas-jiny-4: #7BE0C0;
    --hlas-jiny-5: #E06BC8;
}

.donut.is-ano     { --donut-color: var(--hlas-ano); }
.donut.is-zdrzel  { --donut-color: var(--hlas-zdrzel); }
.donut.is-proti   { --donut-color: var(--hlas-proti); }
.donut.is-veto    { --donut-color: var(--hlas-veto); }
.donut.is-jiny    { --donut-color: var(--hlas-jiny); }
.donut.is-neutral { --donut-color: var(--muted); }

.donut__hole {
    display: grid;
    place-items: center;
    gap: 2px;
    width: 158px;
    height: 158px;
    border-radius: 50%;
    background: var(--surface);
    text-align: center;
}

.donut__label {
    color: var(--muted);
    font-size: var(--fs-note);
}

.donut__hole b {
    font-size: 26px;
    font-weight: 700;
}

.vote-tally__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
}

.pill {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--field);
    color: var(--white);
    font-size: var(--fs-note);
}

.vote-tally__note {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: var(--fs-note);
    text-align: center;
}

.vote-tally__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.tally-row p {
    margin: 0;
}

.tally-row__name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: var(--fs-note);
}

.tally-row__share {
    font-size: var(--fs-lead);
    font-weight: 700;
}

.tally-row__count {
    color: var(--dim);
    font-size: var(--fs-note);
}

.dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--muted);
}

.dot--ano    { background: var(--hlas-ano); }
.dot--zdrzel { background: var(--hlas-zdrzel); }
.dot--proti  { background: var(--hlas-proti); }
.dot--veto   { background: var(--hlas-veto); }
.dot--jiny   { background: var(--hlas-jiny); }

.vote-result__head b.is-ano    { color: var(--hlas-ano); }
.vote-result__head b.is-zdrzel { color: var(--hlas-zdrzel); }
.vote-result__head b.is-proti  { color: var(--hlas-proti); }
.vote-result__head b.is-veto   { color: var(--hlas-veto); }
.vote-result__head b.is-jiny   { color: var(--hlas-jiny); }

/* Možnosti ve formuláři nesou stejnou barvu jako ve výsledku, ať je vidět,
   co člověk vybírá. */
.vote-form .check span::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--moznost-barva, var(--muted));
    vertical-align: baseline;
}

/* ── Týmy ───────────────────────────────────────────────────────────────── */
/* Popis týmu v seznamu je jen ochutnávka — jeden řádek, zbytek se ořízne. */
.team-card__text {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--fs-note);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-people {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40em) {
    .team-people {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.team-people li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
}

.team-people .person__photo {
    width: 40px;
    border-radius: 50%;
}

.team-people__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-people__stav {
    grid-column: 2;
    color: var(--muted);
    font-size: var(--fs-note);
}

.team-actions {
    display: grid;
    gap: 10px;
}

/* Odkazy na zázemí týmu (Drive, fórum). */
.team-links {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.team-links li {
    padding: 5px 0;
    font-size: var(--fs-body);
}

.team-links span {
    color: var(--dim);
}

/* Jméno člena i s profilovkou v tabulce. */
.team-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-cell .person__photo {
    flex: none;
    width: 32px;
    border-radius: 50%;
}

/* Odkaz pod polem formuláře („Váš profil na fóru", „Odeslat testovací
   zprávu") — patří k poli, ne k formuláři, tak je drobný a tlumený. */
.field__note-link {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--fs-note);
    color: var(--muted);
}

.field__note-link:hover {
    color: var(--yellow);
}

/* Náhled mapy v Nastavení → Zobrazení na mapě. Výšku musí mít z CSS,
   jinak Leaflet vykreslí nulový rámeček. */
/* `z-index: 0` dělá z mapky vlastní vrstvu. Leaflet svoje pod-vrstvy skládá
   až do `z-index: 1000` a bez toho by se do nich pletl — a hlavně překryl —
   nášeptávač adresy, který se rozbaluje nad ní. Takhle je celá mapka jedno
   číslo a seznam návrhů nad ní normálně vyhraje. */
.map-preview {
    position: relative;
    z-index: 0;
    height: 360px;
    margin-top: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Mapka, ve které se vybírá místo, má dát najevo, že se do ní dá kliknout.
   Leaflet si při tažení nastaví vlastní kurzor sám. */
.map-preview[data-map-pick] .leaflet-container {
    cursor: crosshair;
}

/* V okně nad Veřejným profilem je náhled jen orientační a pod ním je ještě
   poznámka o souhlasu — na plnou výšku by okno zbytečně přerostlo obrazovku. */
.modal .map-preview {
    height: 220px;
}

/* Nadpis nad seznamem, který nestojí v kartě — potřebuje vlastní vzduch. */
.portal-card__title--loose {
    margin: 30px 0 14px;
}

/* Vícenásobný výběr („Kdo má hlasovat") musí být vysoký, ne 39px jako
   jednořádkové pole — jinak by v něm byla vidět jedna položka. */
.field select[multiple] {
    height: auto;
    min-height: 140px;
    padding: 8px 6px;
}

.field select[multiple] option {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

/* Výběr souboru: nativní tlačítko potřebuje víc místa než text v poli. */
.field input[type="file"] {
    height: auto;
    padding: 8px 10px;
    line-height: 1.4;
}

/* ── Stránky z e-mailového odkazu ──────────────────────────────────────── */
/* Pozvánka do týmu a podpis dohody. Do menu nevedou — člověk sem přijde
   z odkazu v e-mailu a má udělat jedno rozhodnutí. Skladba je proto stejná
   jako u přihlášení: jedna karta na střed okna. */
.gate {
    display: grid;
    align-content: center;
    flex: 1 0 auto;
    padding: 60px 0;
}

/* Položka mřížky má `min-width: auto`, takže se neumí zúžit pod šířku svého
   obsahu. Tabulka členů má na mobilu `min-width: 560px`, a přestože ji
   `.table-card` posouvá do strany sám, protlačila by šířku celé stránce
   (375px okno, 664px stránka). */
.gate > .container {
    min-width: 0;
}

.gate__box {
    width: 100%;
    max-width: 561px;
    margin: 0 auto;
}

/* Pozvánka ukazuje vedle rozhodnutí i soupis členů, takže potřebuje víc. */
.gate__box--wide {
    max-width: 720px;
}

.gate__box > h1 {
    margin-bottom: 8px;
}

.gate__lead {
    margin: 0 0 22px;
    color: var(--muted);
}

.gate__box .card {
    padding: 30px;
}

.gate__box .card + .card {
    margin-top: 20px;
}

.gate__box .card > h2 {
    margin: 0 0 18px;
    font-size: var(--fs-lead);
}

/* Přijmout a odmítnout stojí vedle sebe a nesmějí vypadat stejně —
   odmítnutí pozvánky je nevratné. */
.gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.gate__actions .btn {
    flex: 1 1 0;
    min-width: 160px;
}

.gate__note {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: var(--fs-note);
}

/* ── Účet v hlavičce portálu ───────────────────────────────────────────── */
/* Do teď tu bylo žluté tlačítko „Váš profil" a vedle něj „Odhlásit". Žlutá
   je v IS barva hlavní akce (Odeslat, Přispět) — na vlastní účet strhávala
   pozornost, kterou má dostat obsah stránky. Proto tlumená pilulka; žlutá
   zůstala uvnitř okna „Přispět", kam patří.

   Rozbalovátko je `<details>`, ne skript: prohlížeč obstará otevírání,
   klávesnici i to, že je menu vidět bez JavaScriptu. */
.acct {
    position: relative;
}

.acct__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 5px 5px;
    border: 1px solid var(--border);
    /* Ne pilulka: zaoblení drží stejnou hodnotu jako tlačítka a karty
       v celém IS. Vnitřní roh profilovky je o odsazení menší (8 − 5 + 1),
       jinak by mezi ní a rámečkem vznikl srpek. */
    border-radius: var(--radius);
    cursor: pointer;
    /* Trojúhelníček, který si `summary` kreslí samo, nahrazuje vlastní
       šipka — v obou prohlížečových rodinách se schovává jinak. */
    list-style: none;
}

.acct__btn::-webkit-details-marker {
    display: none;
}

.acct__btn:hover {
    background: var(--field);
    border-color: var(--field-hover);
}

.acct__photo {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Profilovka je jinde celý čtverec s rohy 8 px; tady je menší, takže menší
   rohy a menší písmo náhradních iniciál. */
.acct__photo .person__photo {
    border-radius: var(--radius-sm);
}

.acct__photo .person__photo--empty {
    font-size: 14px;
}

.acct__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.acct__name {
    color: var(--white);
    font-size: var(--fs-note);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}

/* ID je doplňková informace — čte se, jen když je ho potřeba opsat. */
.acct__id {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.acct__chevron {
    display: flex;
    color: var(--muted);
    transition: transform .15s ease;
}

.acct[open] .acct__chevron {
    transform: rotate(180deg);
}

.acct__menu {
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg);
    display: grid;
    gap: 2px;
}

/* Položka menu. `:not(.btn)` v `.p-nav a` má vyšší specificitu, proto se
   barva i odsazení musí přebít odsud. */
.p-nav .acct__menu a.acct__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-field);
    color: var(--white);
    font-size: var(--fs-note);
    font-weight: 500;
}

.p-nav .acct__menu a.acct__item:hover {
    background: var(--field);
    color: var(--white);
    text-decoration: none;
}

.acct__item .ico {
    flex: none;
    color: var(--muted);
}

.p-nav .acct__menu a.acct__item:hover .ico {
    color: var(--yellow);
}

/* Odhlášení je východ, ne cíl — stejný tlumený tón jako dřív u odkazu. */
.p-nav .acct__menu a.acct__item--out {
    color: var(--muted);
}

.acct__sep {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid var(--border);
}

/* Na mobilu je menu součástí rozbaleného pruhu pod hlavičkou, takže se
   nikam neplave — jen se vysune pod pilulku. */
@media (min-width: 62em) {
    .acct__menu {
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 60;
        min-width: 248px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    }
}

/* ── Detaily účtu ──────────────────────────────────────────────────────── */
.acct-detail {
    margin: 0 0 18px;
    display: grid;
    gap: 14px;
}

.acct-detail--tight {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    gap: 10px;
}

.acct-detail__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
}

/* Popisek i hodnota drží jeden řez a jednu velikost jako popisky polí ve
   formuláři (`.field > span`). Hodnota se odliší barvou, ne jiným písmem —
   míchat v jedné kartě dvě rodiny (třeba neproporcionální pro ID) vypadá
   jako nedodělek. */
.acct-detail dt,
.acct-detail dd {
    font-size: var(--fs-note);
    line-height: 1.3;
}

.acct-detail dt {
    color: var(--muted);
}

.acct-detail dd {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 12px;
    text-align: right;
    overflow-wrap: anywhere;
}

.acct-detail__val {
    color: var(--white);
}

/* ID a variabilní symbol se opisují po znacích, takže o něco volnější
   prostrkání — bez změny písma. */
.acct-detail__val--id {
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/* Přepínač odběru newsletteru je vlastní formulář (uloží se hned, ne až
   s profilem). V řádku se má chovat jako to tlačítko, které v něm je. */
.acct-detail__form {
    margin: 0;
    display: flex;
}

/* `.portal-note` má **záporný** horní okraj — je dělaná pod pole formuláře,
   kde se dotahuje k jeho spodní mezeře. Za soupisem údajů, který žádnou
   nemá, se o poslední řádek opřela a texty se slily. */
.acct-detail + .portal-note {
    margin-top: 14px;
}

/* ── Karty druhů voleb (`/portal/volby/`) ───────────────────────────────── */
/* Podle rámu z Figmy: černá karta, velký bílý nadpis dole vlevo, pod ním
   dvouřádkový žlutý podtitul a vpravo velká žlutá obrysová ikona.
   Není to `.tiles` z administrace — ty jsou dlaždice s čísly a jiný rytmus. */
.vote-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
}

/* Dva sloupce od 40em. Druhů je pět, takže poslední karta zůstane na svém
   řádku sama — mřížka to zvládne, nic se kvůli tomu nepřepisuje. */
@media (min-width: 40em) {
    .vote-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vote-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 210px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--black);
    color: var(--white);
    overflow: hidden;
}

.vote-tile:hover {
    border-color: var(--yellow);
    text-decoration: none;
}

/* Ikona je pozadí, ne obsah: leží pod textem a klik jí prochází skrz.

   Je schválně velká a **přetéká přes pravý okraj** — karta ji ořízne
   (`overflow: hidden`), takže z ní kouká jen kus a vypadá jako grafika,
   ne jako piktogram. Aby text zůstal čitelný, je hodně průhledná; kdyby byla
   plná žlutá, přebila by nadpis, který je na kartě to hlavní.

   `will-change` a `translateZ(0)` drží ikonu na vlastní vrstvě, jinak
   prohlížeč při zvětšování překresluje celou kartu i s textem. */
.vote-tile__icon {
    position: absolute;
    display: block;
    right: -58px;
    top: 50%;
    color: var(--yellow);
    opacity: .14;
    pointer-events: none;
    transform: translate3d(0, -50%, 0);
    transform-origin: 70% 50%;
    transition: transform .5s cubic-bezier(.2, .7, .25, 1), opacity .35s ease;
    will-change: transform, opacity;
}

/* Značka strany je obrázek, ne SVG. `block` kvůli tomu, aby pod obrázkem
   nezůstal proužek na dotažnici řádku — svislé vystředění ikony by o něj
   jinak bylo posunuté. */
.vote-tile__icon > * {
    display: block;
}

/* Uzavřený symbol (kruh hvězd EU) se uříznout nesmí — půlkruh hvězd není znak
   Evropské unie. Zůstává stejně velký i stejně tlumený, jen skoro nepřetéká. */
.vote-tile__icon--cely {
    right: -14px;
}

.vote-tile:hover .vote-tile__icon,
.vote-tile:focus-visible .vote-tile__icon {
    opacity: .3;
    transform: translate3d(-10px, -50%, 0) scale(1.22) rotate(-5deg);
}

/* Na úzké obrazovce je karta o polovinu užší, ale ikona ne — zabrala by ji
   celou a nadpis by ležel přes ni. Zmenší se a odsune dál za okraj; velikost
   nastavuje šablona atributem, tady se přebíjí.

   Míra se dává jen šířkou: `height: auto` dopočítá výšku z poměru stran, takže
   se pravidlo hodí i na značku strany, která čtvercová není. */
@media (max-width: 40em) {
    .vote-tile__icon {
        right: -46px;
    }

    .vote-tile__icon--cely {
        right: -10px;
    }

    .vote-tile__icon > * {
        width: 140px;
        height: auto;
    }
}

/* Kdo si vypnul animace, dostane ikonu v klidu — zesvětlení zůstává, protože
   to je informace o tom, že je karta pod myší, ne ozdoba. */
@media (prefers-reduced-motion: reduce) {
    .vote-tile__icon,
    .vote-tile:hover .vote-tile__icon,
    .vote-tile:focus-visible .vote-tile__icon {
        transition: opacity .35s ease;
        transform: translate3d(0, -50%, 0);
    }
}

.vote-tile__title {
    margin: 0;
    position: relative;
    font-size: var(--fs-h1);
    line-height: var(--lh-head);
}

.vote-tile__sub {
    margin: 6px 0 0;
    position: relative;
    /* Podtitul je v návrhu na dva řádky; užší sloupec ho tam udrží
       i bez ručního zalomení. */
    max-width: 18ch;
    color: var(--yellow);
    font-size: var(--fs-note);
    font-weight: 700;
    line-height: 1.25;
}

/* Stav je nahoře vlevo, zbytek karty zůstává dole — `margin-bottom: auto`
   ho odtlačí ke stropu, aniž by se sahalo na zarovnání nadpisu. */
.vote-tile__count {
    position: relative;
    margin: 0 0 auto;
    color: var(--muted);
    font-size: var(--fs-note);
}

/* Otevřené volby svítí zeleně — jediná věc, kvůli které má smysl kartu
   rozkliknout hned. Uzavřené a nevyhlášené zůstávají tlumené. */
.vote-tile__count--open {
    color: var(--success);
    font-weight: 700;
}

/* Kampaň v seznamu druhu ─────────────────────────────────────────────────── */
/* Uvnitř kampaně je soupis míst, ne hromada samostatných karet — řádky proto
   nemají rámeček. Rozdělení kampaní od sebe obstará mezera a nadpis. */
/* Přepínač mezi ročníky voleb. Obyčejný formulář, aby jel bez JavaScriptu;
   pole je široké podle názvu voleb, ne podle celé stránky. */
.vote-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

/* Stejné hodnoty jako `.portal-search input` a `.field select` — pole v portálu
   vypadají všude stejně, jen tohle nestojí uvnitř `.field`. */
.vote-switch select {
    flex: 0 1 420px;
    min-width: 0;
    height: 39px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-field);
    background: var(--field);
    color: var(--white);
    font: inherit;
    font-size: var(--fs-body);
}

.vote-switch select:focus {
    outline: none;
    border-color: var(--yellow);
    background: var(--field-hover);
}

/* Hledání stojí hned pod hlavičkou kampaně, ne v proudu textu — potřebuje
   nad sebou vzduch, jinak se lepí na termín voleb. */
.vote-campaign__head + .portal-search,
.vote-switch + .portal-search {
    margin-top: 18px;
}

.vote-campaign__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 28px;
}

/* Název voleb vlevo, stav a termín vpravo. Odsazení nese **štítek**, ne datum
   — štítek stojí v pořadí před ním, takže odtlačí obojí naráz; kdyby ho neslo
   nic, oba prvky by se lepily na název. */
@media (min-width: 40em) {
    .vote-campaign__head .chip {
        margin-left: auto;
    }
}

/* Na úzké obrazovce se název zalomí na dva řádky a štítek s termínem spadnou
   pod něj. Tam se odsazení musí zrušit ručně — `auto` platí i na zalomeném
   řádku a odplavalo by je doprava, pryč od názvu, ke kterému patří. */
@media (max-width: 40em) {
    .vote-campaign__head .chip {
        margin-left: 0;
    }

    /* Termín má v řádku soupisu `flex: none`, aby se nelámal. V hlavičce
       kandidátky je ale za ním celý název voleb, a ten se na úzké obrazovce
       nevejde — bez tohohle přeteče ven ze stránky. Dostane proto vlastní
       řádek a smí se zalomit. */
    .vote-campaign__head .vote-row__when {
        flex: 1 1 100%;
        min-width: 0;
    }
}

.vote-campaign__title {
    margin: 0;
    font-size: var(--fs-h2);
    line-height: var(--lh-head);
}

/* Když je to nadpis stránky (název místa na kandidátce), má mít velikost
   jako `.vote-title` na detailu hlasování a týmu — tedy `h1`. Na stránce
   druhu voleb zůstává název kampaně `h2`, aby nesoupeřil s nadpisem nad ním. */
h1.vote-campaign__title {
    font-size: var(--fs-h1);
}

/* Bez verzálek — kapitálky na celý nadpis vypadají křiklavě a hůř se čtou. */
.vote-campaign__nadpis {
    margin: 22px 0 6px;
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--muted);
}

/* Druhá skupina (místa, kam kandidovat nejde) se odděluje mezerou — je to
   jediné, co ji od té první odlišuje. */
.vote-campaign__nadpis--odsazeny {
    margin-top: 40px;
}

/* Řádek místa. Stejná skladba jako `.vote-card` u hlasování, ale bez rámečku:
   uvnitř jedné kampaně je to výčet, ne samostatné karty. */
.vote-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    /* Odsazení do stran je záporným okrajem vytažené ven, aby zvýraznění při
       najetí myší vypadalo jako pruh přes celou šířku, ne jako úzký obdélník
       kolem textu. Předěly mezi řádky tu schválně nejsou. */
    margin: 0 -12px;
    padding: 14px 12px;
    border-radius: var(--radius-field);
}

.vote-row:hover {
    background: var(--field);
}

/* Soupis míst kandidatury. Nahoře jsou místa, která se přihlášeného týkají
   (domov a kde kandiduje), pod nimi zbytek — mezi ně patří vlašská čára
   a mezera, aby bylo vidět, že jsou to dvě různé věci. Předěly mezi
   jednotlivými řádky tu schválně nejsou; oddělují se vzduchem. */
.vote-places--moje {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* Nadpis „Ostatní kraje" hned za čarou nepotřebuje tak velký odstup jako
   nadpis, který stojí sám v proudu textu. */
.vote-places--moje + .vote-campaign__nadpis {
    margin-top: 26px;
}

.vote-row__main {
    flex: 1 1 240px;
    min-width: 0;
}

.vote-row__title {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.2;
    /* Flex kvůli vykřičníku a štítkům vedle jména: na účaří se 17px ikona
       vedle 16px písma opticky nesrovná, `align-items: center` ano.
       `wrap` nechává dlouhé jméno zalomit jako dřív. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Název obvodu zůstává na `--fs-body` jako ostatní řádky. Zkoušelo se dát mu
   velikost karet hlasování (`--fs-name`), ale čtrnáct takových nadpisů pod
   sebou udělalo ze soupisu stěnu — soupis má být k přehlédnutí, ne k přečtení.
   Tučnost je proto o stupeň výš než u ostatních řádků: v dlouhém sloupci se
   názvy odliší od popisků, aniž by kvůli tomu narostly. */
.vote-places .vote-row__title {
    font-weight: 700;
}

/* Vykřičník u jména kandidáta: neúplná adresa do prohlášení, nebo bydliště
   mimo místo kandidatury. Žlutá, protože je to upozornění, ne chyba —
   kandidovat jinde jde a IS bydliště spolehlivě nezná; červená by tvrdila
   víc, než ví. Svislé zarovnání řeší flex na nadpisu, ne `vertical-align`. */
.vote-row__warn {
    display: inline-flex;
    color: var(--yellow);
    line-height: 0;
    cursor: help;
}

/* Označení domovského místa („Váš kraj") uvnitř nadpisu řádku. Schválně to
   není `chip` — ten je 30 px vysoký a v řádku nadpisu by rozhodil rytmus
   seznamu. Doporučení má být vidět, ne křičet. */
.vote-row__home {
    margin-left: 10px;
    color: var(--yellow);
    font-size: var(--fs-note);
    font-weight: 600;
    white-space: nowrap;
}

/* Proč tam nejde kandidovat. Drobné a tlumené — je to vysvětlivka k řádku,
   ne varování. */
.vote-row__note {
    display: block;
    margin-top: 2px;
    color: var(--dim);
    font-size: var(--fs-note);
}

.vote-row__when {
    flex: none;
    color: var(--muted);
    font-size: var(--fs-small);
}

/* Dokumenty ke stažení v řádku. Dva formáty téhož obsahu, takže dvě krátké
   popisky za jednou ikonou — samostatná ikona pro každý formát by nešla
   rozeznat a modální okno kvůli dvěma odkazům je zbytečné kolo navíc.
   Tlumené jako `__note`: je to služba k řádku, ne jeho hlavní obsah. */
.vote-row__docs {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-note);
}

.vote-row__docs-ico {
    display: inline-flex;
    color: var(--dim);
}

.vote-row__docs a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
}

.vote-row__docs a:hover,
.vote-row__docs a:focus-visible {
    color: var(--yellow);
    text-decoration: underline;
}

/* Formulář pořadí u kandidáta — číslo a tlačítko vedle sebe, úzké pole.
   Číslo je jen dvojciferné, tak nemá zabírat celou šířku řádku. */
.vote-order {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vote-order input[type="number"] {
    width: 72px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-field);
    background: var(--field);
    color: var(--white);
    font: inherit;
    font-size: var(--fs-small);
    text-align: center;
}

.vote-order input[type="number"]:focus {
    outline: none;
    border-color: var(--yellow);
    background: var(--field-hover);
}

/* Dva formuláře pod sebou v okně (Uložit nastavení + Uzavřít kandidátku)
   se dotýkaly — `form` žádnou spodní mezeru nemá. Deset pixelů je míň než
   předěl mezi bloky (22/24), protože jde o dvojici tlačítek, ne o dvě témata. */
.portal-card form + form {
    margin-top: 10px;
}

/* Tlačítko pod seznamem — přihláška na kandidátku, přiřazení lídra. */
.vote-signup {
    margin: 24px 0 0;
}

/* ── Pozvánky na kandidátku ──────────────────────────────────────────────── */
/* Obě cesty stojí v jedné řadě: pozvat člověka z evidence (hlavní) a vyrobit
   odkaz pro někoho mimo IS (záložní). Na úzkém okně se zalomí pod sebe. */
.invite-akce {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 16px;
}

/* Rozbalovátko a jeho tlačítko drží pohromadě na jednom řádku — je to jedna
   akce. Zalomí se teprve na úzkém okně (viz níž). */
.invite-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    /* Roste, aby rozbalovátko mělo z čeho brát šířku — `auto` by mu ji
       odvodilo z popisku a pole by vyšlo užší než jména, která nabízí. */
    flex: 1 1 auto;
}

/* Rozbalovátko má svou šířku a dál neroste: přes celou kartu by vypadalo
   jako formulář na stránce, ne jako jedna akce. `min-width` je tam kvůli
   dlouhým jménům s rolí — bez něj se scvrkne na šířku „— vyberte —“. */
.invite-form__pole {
    flex: 1 1 auto;
    /* Strop, aby pole nepřejelo přes celou kartu; přes ni by vypadalo jako
       formulář stránky, ne jako jedna akce. Spodek kvůli dlouhým jménům
       s rolí — bez něj se scvrkne na šířku „— vyberte —“. */
    max-width: 420px;
    min-width: 240px;
    margin: 0;
}

/* Popisky tlačítek se nelámou na dvě řádky — „Poslat / pozvánku" vypadá
   jako chyba sazby. */
.invite-akce .btn {
    flex: none;
    white-space: nowrap;
}

/* Záložní cesta stojí na druhém konci řádku, ne hned vedle hlavní. */
.invite-akce > form:last-child {
    margin-left: auto;
}

@media (max-width: 47.99em) {
    /* Na úzkém okně by „odsazení doprava" jen vyrobilo díru a rozbalovátko
       s tlačítkem vedle sebe by se nevešly. */
    .invite-akce > form:last-child {
        margin-left: 0;
    }

    .invite-form {
        flex-wrap: wrap;
    }

    .invite-form__pole {
        flex: 1 1 100%;
    }
}

.invite-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

/* Řádek pozvánky je vyšší než řádek kandidáta — vejde se do něj jméno,
   pole s odkazem a stav pod tím. Zarovnání nahoru, aby štítek a koš stály
   u jména, ne uprostřed té výšky. */
.invite-row {
    align-items: flex-start;
    padding: 12px 0;
}

.invite-row .vote-row__main {
    display: grid;
    gap: 6px;
}

/* Pole s hotovým odkazem na kandidaturu. Je to `input`, ne text: dá se
   označit trojklikem a zkopírovat, a `readonly` brání překlepům. */
.vote-link {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-field);
    background: var(--field);
    color: var(--white);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-note);
}

.vote-link:focus {
    outline: none;
    border-color: var(--yellow);
}

/* ── Kandidátka: přetahování pořadí ──────────────────────────────────────── */
/* Pořadí se nevyplňuje, přetahuje se. Číslo vlevo je jen informace; jediný
   ovladač je úchyt a celý řádek. Bez JavaScriptu se pořadí měnit nedá —
   vědomý ústupek, stejně jako u oken Nastavení. */
.vote-row--drag {
    cursor: grab;
}

.vote-row--drag:active {
    cursor: grabbing;
}

/* Řádek, který se právě táhne. Průhledný, ať je vidět, kam míří. */
.vote-row.is-dragging {
    opacity: .4;
}

/* Místo, kam řádek spadne. */
.vote-row.is-over {
    background: var(--field-hover);
    box-shadow: inset 0 2px 0 var(--yellow);
}

.vote-order__num {
    flex: none;
    width: 34px;
    color: var(--muted);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.vote-order__grip {
    flex: none;
    display: flex;
    align-items: center;
    color: var(--dim);
}

.vote-row:hover .vote-order__grip {
    color: var(--muted);
}

/* Prázdná zóna nepřiřazených — aby bylo kam pustit posledního kandidáta. */
.vote-drop {
    min-height: 44px;
    margin: 0 -12px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-field);
    color: var(--dim);
    font-size: var(--fs-note);
}

.vote-drop.is-over {
    border-color: var(--yellow);
    color: var(--muted);
}

/* ── Ikonová tlačítka u kandidáta ────────────────────────────────────────── */
/* Ikona bez rámečku — orámovaná ikona vypadá jako druhé tlačítko vedle
   tlačítka. Při najetí myší se mění jen barva. */
.btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.btn--icon:hover {
    color: var(--white);
    text-decoration: none;
}

/* Mazání je červené — jediná nevratná akce na kandidátce. */
.btn--danger:hover {
    color: var(--danger);
}

/* Ozubené kolečko vedle názvu místa. */
.vote-campaign__head .btn--icon {
    margin-left: auto;
}

/* ── Centrum upozornění ──────────────────────────────────────────────────── */
/* Seznam, ne karty: upozornění se čtou odshora dolů a rámeček kolem každého
   by z deseti řádků udělal deset kusů nábytku. */
.notif {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.notif__item:first-child {
    border-top: 0;
}

/* Nepřečtené pozná oko podle žluté tečky vlevo; barva textu se nemění, aby
   se přečtené nezdálo vypnuté. */
.notif__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: transparent;
}

.notif__item--new .notif__dot {
    background: var(--yellow);
}

.notif__body {
    flex: 1 1 auto;
    min-width: 0;
}

.notif__text {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--white);
    /* Zprávy chodí i z importů a plateb — dlouhé slovo nesmí kartu roztáhnout. */
    overflow-wrap: anywhere;
}

.notif__time {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-note);
    color: var(--dim);
}

/* Chybová zpráva je jediná, u které na barvě záleží. */
.notif__text--error {
    color: var(--danger);
}

/* Odhlášení je POST s CSRF tokenem, ne odkaz (app/docs/workflow-prihlaseni.md).
   Formulář kolem tlačítka nesmí v menu účtu nic odsadit. */
.acct__form { margin: 0; display: block; }
button.p-nav__out { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* Discord v okně Propojení účtů — pod polem fóra (portal/_form-ucty). */
.discord-link {
    margin-top: 16px;
}

.discord-link__state {
    margin: 0 0 8px;
    font-size: var(--fs-note);
}

.discord-link .btn {
    margin-top: 2px;
}