/*
 * IBM Plex - z návrhu v Claude Designu. Fonty hostujeme sami, ne přes Google Fonts:
 * web tak nikam neposílá IP adresu návštěvníka a nezávisí na cizí doméně.
 *
 * Staženo z fonts.googleapis.com, licence SIL Open Font License 1.1.
 * Jen podmnožiny latin a latin-ext - čeština víc nepotřebuje.
 */

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-mono-400-latin-ext.081b2e53.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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-mono-400-latin.2b13cc93.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;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-mono-500-latin-ext.c28c19b5.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: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-mono-500-latin.a1fc5384.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;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-sans-400-latin-ext.57bde7ca.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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-sans-400-latin.b33a81b7.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;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-sans-500-latin-ext.57bde7ca.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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-sans-500-latin.b33a81b7.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;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-sans-600-latin-ext.57bde7ca.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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-sans-600-latin.b33a81b7.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;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-sans-700-latin-ext.57bde7ca.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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-sans-700-latin.b33a81b7.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;
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-serif-600-latin-ext.10f72f93.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: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/build/fonts/ibm-plex-serif-600-latin.2ed576da.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;
}

/*
 * Stats.cz - hlavní styl.
 *
 * Návrh z Claude Designu měl všechno v inline stylech, protože to byl jeden
 * statický dokument. Tady jsou z toho normální třídy - hodnoty jsou přesně ty
 * z návrhu, jen pojmenované.
 *
 * Barvy jdou výhradně přes tokeny. Hexadecimální hodnota nesmí být nikde mimo
 * blok :root, jinak se rozbije tmavý režim. Světlou a tmavou variantu drží
 * u sebe light-dark(), takže každá barva je v souboru právě jednou.
 */

/* ==========================================================================
   1. Tokeny
   ========================================================================== */

:root {
    /*
     * Každá barva je tu jednou, v obou variantách. light-dark() vybere podle
     * použitého color-scheme, takže se hodnoty neopakují ve třech blocích
     * (:root, ruční tmavý, tmavý podle prohlížeče) a nemůže se stát, co se
     * stalo barvám řad v grafech: přidaly se jen do dvou z nich a v režimu
     * "podle prohlížeče" se pak kreslily světlé barvy na tmavou plochu.
     *
     * Cenou je, že tokeny drží jen prohlížeče od roku 2024. Web stojí na
     * gridu a vlastních vlastnostech, takže to není nová hranice.
     */
    color-scheme: light dark;

    --bg: light-dark(#F2F4F7, #15181C);
    --surface: light-dark(#FFFFFF, #1A1E23);
    --surface-2: light-dark(#E9EDF2, #1E2329);
    --border: light-dark(#D7DDE4, #2C333B);
    --border-soft: light-dark(#EEF1F4, #242A31);
    /* Světlé odstíny jsou o stupeň tmavší, než byly. Kontrast proti bílé:
       19,1 / 12,5 / 8,1 / 4,7 : 1 (dřív 16,5 / 9,6 / 5,0 / 3,1). Na AA pro
       běžnou velikost dosáhnou všechny čtyři, i ten nejslabší - dřív poslední
       dva nestačily a psalo se jimi přitom leccos, co se číst má.
       Tmavé zůstávají beze změny; tam byl kontrast v pořádku. */
    --ink: light-dark(#0A1017, #E8EAED);
    --ink-2: light-dark(#2A3540, #B9C0C8);
    --ink-3: light-dark(#47515C, #8A929B);
    --ink-4: light-dark(#6B7580, #757E88);
    --accent: light-dark(#14487F, #7FB2E5);
    --accent-ink: light-dark(#FFFFFF, #10151A);
    --accent-soft: light-dark(#E4EBF4, #1E2A36);
    --pos: light-dark(#17705C, #6DC49B);
    --neg: light-dark(#A6382E, #E58A7B);
    --neutral: light-dark(#4A5560, #A8B0B8);

    /* Kategorická paleta pro řady v grafech.
       Sloty se přidělují v pevném pořadí, nikdy dokola - barva patří k entitě,
       ne k jejímu pořadí, takže filtr, který změní počet řad, nesmí přebarvit
       ty zbývající.
       Sémantické --pos a --neg se tu záměrně nepoužívají: jsou vyhrazené pro
       stav (růst je dobrý / špatný) a obarvit jimi "narození a zemřelí" by
       podsouvalo hodnocení, které z dat neplyne.
       Tmavé odstíny jsou nakrokované pro plochu #1A1E23, ne jen zesvětlené.
       Ověřeno validátorem: nejhorší dvojice ΔE 9,2 při deuteranopii a 24,0 při
       normálním vidění na světlé ploše, 9,4 na tmavé. Zelená má na světlé ploše
       kontrast 2,82:1, proto u grafů vždy legenda a tabulka hodnot pod nimi. */
    --series-1: light-dark(#2A78D6, #3987E5);
    --series-2: light-dark(#EB6834, #D95926);
    --series-3: light-dark(#1BAF7A, #199E70);
    /* Čtvrtý a pátý slot přibyly kvůli prstencovým grafům. Pětice ověřena
       validátorem proti bílé: nejhorší dvojice ΔE 9,2 (deuteranopie) a 21,7
       při normálním vidění. Šestý slot je šedivý a patří vždycky "ostatním" -
       není to další kategorie, ale zbytek, který se nevešel. */
    --series-4: light-dark(#835BAE, #B691E1);
    --series-5: light-dark(#A0600B, #D8944D);
    --series-6: light-dark(#8B94A0, #757E88);

    /* Akcenty témat.
       Slouží k orientaci na stránce, ne ke kódování hodnot - proto se nemíchají
       s --series-*, které patří řadám v grafech. Odstíny jsou spočítané v OKLCH
       na shodné světlosti a sytosti, takže se liší jen odstínem a žádné téma
       nepůsobí důležitěji než jiné. Kontrast proti ploše je u všech nejméně
       4,5:1 na světlé a 6,3:1 na tmavé. Barva nikdy nenese informaci sama -
       vedle ní je vždy název tématu. */
    --acc-blue: light-dark(#2A75BA, #67AAED);
    --acc-indigo: light-dark(#6B64BA, #9D99ED);
    --acc-rust: light-dark(#AF5331, #E4896A);
    --acc-amber: light-dark(#A0600B, #D8944D);
    --acc-terracotta: light-dark(#B14D51, #E68485);
    --acc-magenta: light-dark(#9B5295, #CF88C8);
    --acc-violet: light-dark(#835BAE, #B691E1);
    --acc-rose: light-dark(#AA4D75, #DF84A8);
    --acc-cyan: light-dark(#017E9A, #2FB5D8);
    --acc-teal: light-dark(#138282, #16BBBC);
    --acc-green: light-dark(#298646, #69BA7C);
    --acc-emerald: light-dark(#11846E, #39BDA0);
    --acc-periwinkle: light-dark(#546BBD, #87A0F0);
    --acc-crimson: light-dark(#AF4C60, #E48393);
    --acc-azure: light-dark(#077BAB, #4CB0E5);
    --acc-neutral: light-dark(#66707C, #8A929B);

    --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

    --wrap: 1280px;
    --gap: 24px;
}

/* Volba uživatele. light-dark() se řídí použitým color-scheme, takže stačí
   přepnout jeho hodnotu - barvy se nikde neopakují. */
html[data-theme='light'] {
    color-scheme: light;
}

html[data-theme='dark'] {
    color-scheme: dark;
}

/* Stín není barva, takže do light-dark() nepatří a musí se řešit zvlášť. */
:root {
    --shadow: 0 1px 0 rgba(22, 32, 43, 0.05);
}

html[data-theme='dark'] {
    --shadow: none;
}

@media (prefers-color-scheme: dark) {
    html[data-theme='auto'] {
        --shadow: none;
    }
}

/* ==========================================================================
   2. Základ
   ========================================================================== */

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

/* color-scheme se nastavuje v bloku tokenů - řídí light-dark(), takže patří k barvám. */
html {
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* Číslice stejné šířky - tabulky a dlaždice pak neposkakují. */
    font-variant-numeric: tabular-nums;
}

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

a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 600;
}

table {
    border-collapse: collapse;
}

input::placeholder {
    color: var(--ink-4);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Popisek jen pro čtečky (tam, kde vizuálně stačí ikona). */
.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gap);
}

.mono {
    font-family: var(--mono);
}

/* Popisek pod hodnotou: zdroj a období. Na dlaždicích i v tabulkách.

   Bezpatkový font, ne neproporcionální. Pravidlo na celém webu: monospace
   jen tam, kde se pod sebou zarovnávají číslice - v tabulkách, u změn a na
   osách grafů. Souvislý text v něm je nepříjemný na čtení a míchat dvě
   písma na jedné stránce nemá důvod. */
.meta {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--ink-3);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.section-head h2 {
    font-size: 15px;
}

.section-head a,
.section-head span {
    font-size: 13px;
}

/* Odsazení druhého nadpisu v témže sloupci (Žebříčky → Témata). */
.section-head--spaced {
    margin-top: 40px;
}

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

/* Barva změny podle směru. `is-neutral` je pro ukazatele, u kterých růst ani
   pokles není sám o sobě dobrý (teplota, počet obyvatel). */
.delta {
    font-family: var(--mono);
    font-size: 11px;
}

.delta.is-pos {
    color: var(--pos);
}

.delta.is-neg {
    color: var(--neg);
}

.delta.is-neutral {
    color: var(--neutral);
}

/* ==========================================================================
   3. Hlavička
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 62px;
}

.logo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--ink);
}

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

.logo__name {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.logo__name em {
    font-style: normal;
    color: var(--accent);
}

.logo__claim {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.site-nav {
    display: flex;
    gap: 22px;
    margin-left: auto;
    font-size: 14px;
    font-weight: 500;
}

.site-nav a {
    color: var(--ink-2);
}

.site-nav a.is-active {
    color: var(--ink);
    font-weight: 600;
}

.site-header__aside {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 22px;
    border-left: 1px solid var(--border);
}

.site-header__aside .mono {
    font-size: 12px;
    color: var(--ink-3);
}

.btn-ghost {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--ink);
    background: transparent;
    font-size: 13px;
    font-weight: 500;
}

.btn-burger {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.btn-burger__lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.btn-burger__lines span {
    display: block;
    width: 15px;
    height: 1.5px;
    background: currentColor;
}

/* Rozbalené menu na mobilu. */
.mobile-nav {
    display: none;
    flex-direction: column;
    padding: 8px 0 16px;
    border-top: 1px solid var(--border-soft);
}

.mobile-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    color: var(--ink-2);
    font-size: 15px;
}

/* ==========================================================================
   4. Hero a vyhledávání
   ========================================================================== */

.hero {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(320px, 1.35fr) minmax(260px, 1fr);
    gap: 56px;
    align-items: start;
    padding: 52px 24px 44px;
}

.hero h1 {
    margin-bottom: 10px;
    font-family: var(--serif);
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.hero__lead {
    margin: 0 0 22px;
    max-width: 52ch;
    color: var(--ink-2);
    line-height: 1.55;
    text-wrap: pretty;
}

.search {
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 3px;
    box-shadow: var(--shadow);
}

.search__icon {
    padding: 0 4px 0 14px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-4);
}

.search input {
    flex: 1;
    min-width: 0;
    padding: 14px 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
}

.search button {
    align-self: stretch;
    min-height: 44px;
    padding: 14px 22px;
    border: 0;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.hero__hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}

.hero__hints-label {
    margin-right: 2px;
    font-family: var(--sans);
    font-size: 11px;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.chip {
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 13px;
}

.chip:hover {
    border-color: var(--accent);
    text-decoration: none;
}

/* Postranní panel hero: souhrn databáze. */
.db-box {
    padding: 18px 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.db-box__title {
    margin-bottom: 14px;
    font-family: var(--sans);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.db-box__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
}

.db-box__num {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.db-box__label {
    font-size: 12px;
    color: var(--ink-2);
}

.db-box__foot {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-family: var(--sans);
    font-size: 11px;
    color: var(--ink-3);
}

/* ==========================================================================
   5. Dlaždice klíčových ukazatelů
   --------------------------------------------------------------------------
   Mřížka drží spáry přes gap: 1px a rámeček kreslí box-shadow, ne border.
   Sousední dlaždice tak sdílejí jednu linku a nevznikne dvojitá čára.
   ========================================================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
    gap: 1px;
    margin-bottom: 44px;
}

.kpi {
    padding: 16px 18px 14px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--border);
}

.kpi__name {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--ink-2);
}

.kpi__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.kpi__value {
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.kpi .delta {
    display: block;
    margin-top: 6px;
}

.kpi__spark {
    flex: none;
}

.kpi__source {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}

/* ==========================================================================
   6. Dvousloupcový obsah
   ========================================================================== */

/* Menší odsazení nahoře: drobečky navazují na hlavičku webu a velká mezera
   je od sebe zbytečně odtrhávala. */
.main {
    padding-top: 22px;
    padding-bottom: 80px;
}

.cols {
    display: grid;
    grid-template-columns: minmax(300px, 1.15fr) minmax(280px, 1fr);
    gap: 48px;
    align-items: start;
}

.aside {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ==========================================================================
   7. Karta se žebříčky
   ========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
}

.tabs a,
.tabs button {
    min-height: 44px;
    padding: 13px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.tabs a:hover {
    text-decoration: none;
}

.tabs [aria-selected='true'] {
    border-bottom-color: var(--accent);
    color: var(--ink);
    font-weight: 600;
}

.table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;
    font-size: 14px;
}

.table th {
    padding: 10px 16px 8px 0;
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

.table th:first-child,
.table td:first-child {
    padding-left: 18px;
}

.table th:last-child,
.table td:last-child {
    padding-right: 18px;
    text-align: right;
}

.table td {
    padding: 9px 16px 9px 0;
    border-bottom: 1px solid var(--border-soft);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

/* Široká tabulka čísel po letech.
   Vše kromě prvního sloupce je číslo, takže se zarovnává doprava - oko pak
   porovnává řády pod sebou. Poslední sloupec proto nedostává výjimku, kterou
   má běžná .table (tam je vpravo naopak jediná hodnota). */
.table--numeric td,
.table--numeric tbody th {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table--numeric thead th {
    text-align: right;
}

.table--numeric thead th:first-child,
.table--numeric tbody th {
    text-align: left;
}

.table--numeric tbody th {
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-1);
    border-bottom: 1px solid var(--border-soft);
}

.table--dense th,
.table--dense td {
    padding: 6px 12px 6px 0;
    white-space: nowrap;
}

.table--dense th:first-child,
.table--dense td:first-child {
    padding-left: 14px;
}

.table--dense th:last-child,
.table--dense td:last-child {
    padding-right: 14px;
}

/* Záporná hodnota se pozná i bez barvy - má znaménko. Barva je tu navíc,
   ne jediný nosič informace. */
.table--numeric td.neg {
    color: var(--neg);
}

.table--numeric tbody tr:hover td,
.table--numeric tbody tr:hover th {
    background: var(--surface-2);
}

.table .rank {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-4);
}

.table .name a {
    color: var(--ink);
    font-weight: 500;
}

.table .region {
    color: var(--ink-2);
    font-size: 13px;
}

.table .value {
    font-weight: 600;
}

.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    border-top: 1px solid var(--border);
    font-family: var(--sans);
    font-size: 10px;
    color: var(--ink-3);
}

.card__foot a {
    font-family: var(--sans);
    font-size: 10px;
}

/* ==========================================================================
   8. Témata, změny, aktualizace
   ========================================================================== */

.topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 1px;
}

.topic {
    display: block;
    padding: 13px 14px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    color: var(--ink);
}

.topic:hover {
    background: var(--accent-soft);
    text-decoration: none;
}

.topic__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topic__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neutral);
}

.topic__name {
    font-size: 14px;
    font-weight: 500;
}

.topic__count {
    margin-top: 6px;
    padding-left: 14px;
    font-family: var(--sans);
    font-size: 10px;
    color: var(--ink-3);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.change {
    display: block;
    padding: 14px 16px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    color: var(--ink);
}

.change:hover {
    background: var(--accent-soft);
    text-decoration: none;
}

.change__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.change__title {
    font-size: 14px;
    font-weight: 500;
}

.change__delta {
    font-family: var(--mono);
    font-size: 12px;
    white-space: nowrap;
}

.change__note {
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-3);
}

.updates {
    padding: 4px 0;
}

.update {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.update__date {
    flex: none;
    width: 46px;
    font-family: var(--sans);
    font-size: 11px;
    color: var(--ink-4);
    white-space: nowrap;
}

.update__name {
    flex: 1;
    font-size: 13.5px;
}

.update__src {
    padding: 2px 5px;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 10px;
    color: var(--ink-3);
    white-space: nowrap;
}

.updates__foot {
    padding: 11px 16px;
    font-family: var(--sans);
    font-size: 10.5px;
    color: var(--ink-3);
}

/* Postranní box na porovnání dvou obcí. */
.compare-box {
    padding: 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.compare-box h2 {
    margin-bottom: 8px;
    font-size: 15px;
}

.compare-box p {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}

.compare-box form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compare-box input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    outline: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
}

.btn-primary {
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ==========================================================================
   9. Patička
   ========================================================================== */

.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 28px;
    padding: 36px 24px 44px;
}

.site-footer__logo {
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-footer__logo em {
    font-style: normal;
    color: var(--accent);
}

.site-footer__brand p {
    margin: 0;
    max-width: 30ch;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
}

.site-footer__col a {
    color: var(--ink-2);
}

.site-footer__col-title {
    margin-bottom: 3px;
    font-family: var(--sans);
    font-size: 10px;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.site-footer__legal {
    border-top: 1px solid var(--border-soft);
}

.site-footer__legal-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    font-family: var(--sans);
    font-size: 10.5px;
    color: var(--ink-3);
}

/* ==========================================================================
   10. Přepínač tématu
   ========================================================================== */

.theme-switch {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.theme-switch button {
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.theme-switch button[aria-pressed='true'] {
    background: var(--accent);
    color: var(--accent-ink);
}

/* Bez JS je přepínač k ničemu - téma pak řídí jen nastavení prohlížeče. */
.no-js .theme-switch {
    display: none;
}

/* ==========================================================================
   11. Mobil
   ========================================================================== */

@media (max-width: 860px) {
    .site-nav,
    .site-header__aside {
        display: none;
    }

    .btn-burger {
        display: flex;
    }

    .mobile-nav[data-open] {
        display: flex;
    }

    .wrap {
        padding: 0 16px;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 30px 16px 26px;
    }

    .hero h1 {
        font-size: 27px;
    }

    .main {
        padding-top: 26px;
        padding-bottom: 96px;
    }

    .cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .cols > * {
        min-width: 0;
    }

    .hide-sm {
        display: none;
    }

    .site-footer__cols {
        padding: 26px 16px 32px;
    }

    .site-footer__legal-inner {
        padding: 12px 16px;
    }
}

/* ==========================================================================
   12. Profil území
   ========================================================================== */

/* Drobečky jsou navigace, ne poznámka - proto plná barva textu a velikost
   blízká běžnému písmu. Předtím byly slabé a tak malé, že se přehlédly. */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: var(--ink-2);
}

/* Oddělovače mezi položkami zůstávají potlačené - nese je tvar, ne barva. */
.crumbs > span[aria-hidden] {
    color: var(--ink-4);
}

.crumbs a {
    color: var(--ink-2);
}

.crumbs [aria-current] {
    color: var(--ink-2);
}

.profile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.profile-head__type {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-head h1 {
    margin: 4px 0 6px;
    font-family: var(--serif);
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.profile-head__parents {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-3);
}

/* Základní údaje o území. */
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0;
}

.facts--stacked {
    flex-direction: column;
    gap: 12px;
}

.facts dt {
    font-size: 12px;
    color: var(--ink-3);
}

.facts dd {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Značka u hodnot, které jsme spočítali sami, ne převzali ze zdroje.
   Zadání vyžaduje, aby to bylo rozlišitelné i pro čtenáře. */
.derived {
    margin-left: 6px;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 400;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
    cursor: help;
}

/* Automatický souhrn - jen z hodnot, které máme v databázi.

   Bez stropu na šířku: věta je krátká a zalomit ji na dva řádky kvůli
   limitu, který má chránit čitelnost dlouhého textu, nedává smysl. */
.summary {
    margin: 0 0 26px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
}

.summary strong {
    color: var(--ink);
}

.block {
    margin-bottom: 40px;
}

.block-pad {
    padding: 16px 18px;
}

.block-pad h2 {
    margin-bottom: 12px;
    font-size: 15px;
}

.empty {
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--ink-3);
    text-align: center;
}

.parts {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
}

.sources {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
}

.sources li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

/* ==========================================================================
   13. Graf
   --------------------------------------------------------------------------
   Barvy jdou přes tokeny, aby graf fungoval ve světlém i tmavém režimu.
   ========================================================================== */

.chart {
    margin: 0;
    padding: 12px 4px 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.chart svg {
    display: block;
}

.chart__grid {
    stroke: var(--border-soft);
    stroke-width: 1;
}

.chart__axis {
    fill: var(--ink-4);
    font-family: var(--mono);
    font-size: 10px;
}

.chart__area {
    fill: var(--accent);
    opacity: 0.08;
}

.chart__line {
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.chart__dot {
    fill: var(--surface);
    stroke: var(--accent);
    stroke-width: 1.5;
}

.chart-note {
    margin: 10px 0 0;
}

/* ==========================================================================
   14. Textové stránky (zdroje, metodika, stav importů)
   ========================================================================== */

.page-head {
    max-width: 70ch;
    margin-bottom: 32px;
}

.page-head h1 {
    margin-bottom: 10px;
    font-family: var(--serif);
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.page-lead {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-3);
    text-wrap: pretty;
}

.source-desc {
    max-width: 75ch;
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-3);
}

.prose-head {
    margin-bottom: 8px;
    font-size: 15px;
}

.prose {
    max-width: 70ch;
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* Štítek u licence, která dovoluje komerční užití. */
.badge {
    margin-left: 6px;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 9.5px;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Meta popisek pod hlavní hodnotou v buňce tabulky. */
.table .name .meta {
    display: block;
    margin-top: 2px;
}

.notice {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--surface-2);
    border-left: 2px solid var(--border);
    border-radius: 2px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
}

.notice--error {
    border-left-color: var(--neg);
}

.notice p {
    margin: 4px 0 0;
    color: var(--ink-3);
}

.status {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status--ok {
    color: var(--pos);
}

.status--chyba {
    color: var(--neg);
}

.status--bezi,
.status--nezmeneno,
.status--preskoceno {
    color: var(--ink-3);
}

/* ==========================================================================
   15. Rozdělení hodnot (obory, právní formy, stáří firem)
   --------------------------------------------------------------------------
   Pruhy jsou obyčejné divy se šířkou v procentech - kreslí je server, žádný JS.
   ========================================================================== */

/* Nejvýš dva sloupce. auto-fit sem vecpal na širokém okně tři a popisky oborů
   podnikání se pak lámaly na dva řádky - rozpad je seznam textů, ne dlaždice. */
.dist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 760px) {
    .dist-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dist__title {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
}

.dist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dist__row {
    display: grid;
    /* Popisek, pruh, počet, procenta. Pruh bere zbytek místa. */
    grid-template-columns: minmax(0, 1fr) 72px auto 46px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.dist__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-2);
}

.dist__bar {
    height: 6px;
    border-radius: 2px;
    background: var(--surface-2);
    overflow: hidden;
}

.dist__fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
}

.dist__value {
    font-weight: 600;
    text-align: right;
}

.dist__pct {
    font-size: 11px;
    color: var(--ink-3);
    text-align: right;
}

@media (max-width: 520px) {
    .dist__row {
        grid-template-columns: minmax(0, 1fr) auto 44px;
    }

    .dist__bar {
        display: none;
    }
}

/* ==========================================================================
   16. Porovnání dvou území
   ========================================================================== */

.compare-head {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    margin-bottom: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.compare-head__side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.compare-head__side--right {
    text-align: right;
}

.compare-head__name {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.compare-head__vs {
    flex: none;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-4);
    text-transform: uppercase;
}

/* Vyšší z dvojice hodnot. Záměrně neutrální zvýraznění, ne zelená/červená -
   co je "lepší", u většiny ukazatelů z dat neplyne. */
.compare-table .is-higher {
    background: var(--accent-soft);
}

.compare-table .name .meta {
    display: block;
    margin-top: 2px;
}

.compare-table .value .meta {
    display: block;
    margin-top: 2px;
}

/* Seznam příznaků "má / nemá" - u vybavenosti obce nedávají podíly smysl. */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag {
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12.5px;
    color: var(--ink-2);
}

/* Téma, pro které zatím nemáme data - v seznamu zůstává, ale bez odkazu. */
.topic--empty {
    display: block;
    padding: 13px 14px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    opacity: 0.55;
    cursor: default;
}

/* ==========================================================================
   17. Mřížka grafů
   --------------------------------------------------------------------------
   Několik grafů vedle sebe místo jednoho velkého. Každý má vlastní nadpis
   a legendu - identita řady nikdy nestojí jen na barvě.
   ========================================================================== */

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.chart-card {
    padding: 14px 16px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.chart-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.chart-card__title {
    font-size: 14px;
    font-weight: 600;
}

.chart-card__note {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--ink-4);
    white-space: nowrap;
}

/* Legenda je u dvou a víc řad povinná. Barevná tečka nese identitu,
   text zůstává v barvě písma - nikdy ne v barvě řady. */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 2px 0 6px;
    font-size: 12px;
    color: var(--ink-2);
}

.legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend__mark {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
}

.legend__mark--s1 { background: var(--series-1); }
.legend__mark--s2 { background: var(--series-2); }
.legend__mark--s3 { background: var(--series-3); }

/* Řady v SVG. Tenké značky, mřížka ustupuje do pozadí. */
/* Sloty kategorické palety. `color` je tu kvůli tvarům, které dědí barvu přes
   currentColor (díly prstence, tečky v seznamu); stroke a fill kvůli grafům.
   Všechno v jednom pravidle schválně - dvě pravidla pro týž slot se dřív nebo
   později rozejdou. */
.series--s1 { color: var(--series-1); stroke: var(--series-1); fill: var(--series-1); }
.series--s2 { color: var(--series-2); stroke: var(--series-2); fill: var(--series-2); }
.series--s3 { color: var(--series-3); stroke: var(--series-3); fill: var(--series-3); }
.series--s4 { color: var(--series-4); stroke: var(--series-4); fill: var(--series-4); }
.series--s5 { color: var(--series-5); stroke: var(--series-5); fill: var(--series-5); }
.series--s6 { color: var(--series-6); stroke: var(--series-6); fill: var(--series-6); }

.chart__series-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Sloupec má zaoblený konec u hodnoty a sedí na základní ose. */
.chart__bar {
    stroke: none;
    rx: 1.5;
}

/* Nulová osa je výraznější než mřížka - u salda je rozdíl plus/mínus to hlavní. */
.chart__zero {
    stroke: var(--ink-4);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.chart__dot--small {
    r: 2;
    stroke-width: 1.2;
    fill: var(--surface);
}

/* ==========================================================================
   14. Profil území: obsah stránky a barevné akcenty
   ========================================================================== */

/*
 * Mapa tokenů na akcent sekce.
 *
 * Jméno tokenu přichází z databáze (topic.color_token), hex zná jen tohle místo.
 * Sekce si ho podědí do --topic-accent a dál už se pracuje jen s ním, takže
 * přidat téma znamená přidat jeden řádek sem a jeden do číselníku.
 */
[data-accent='blue']       { --topic-accent: var(--acc-blue); }
[data-accent='indigo']     { --topic-accent: var(--acc-indigo); }
[data-accent='rust']       { --topic-accent: var(--acc-rust); }
[data-accent='amber']      { --topic-accent: var(--acc-amber); }
[data-accent='terracotta'] { --topic-accent: var(--acc-terracotta); }
[data-accent='magenta']    { --topic-accent: var(--acc-magenta); }
[data-accent='violet']     { --topic-accent: var(--acc-violet); }
[data-accent='rose']       { --topic-accent: var(--acc-rose); }
[data-accent='cyan']       { --topic-accent: var(--acc-cyan); }
[data-accent='teal']       { --topic-accent: var(--acc-teal); }
[data-accent='green']      { --topic-accent: var(--acc-green); }
[data-accent='emerald']    { --topic-accent: var(--acc-emerald); }
[data-accent='periwinkle'] { --topic-accent: var(--acc-periwinkle); }
[data-accent='crimson']    { --topic-accent: var(--acc-crimson); }
[data-accent='azure']      { --topic-accent: var(--acc-azure); }
[data-accent='neutral']    { --topic-accent: var(--acc-neutral); }

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

/* Bez minmax(0, 1fr) výš by široká tabulka roztáhla celý grid a stránka by
   se posouvala vodorovně. Tohle drží obsah v mezích sloupce. */
.profile-body {
    min-width: 0;
}

/* Kotva nesmí skončit pod lepkavou hlavičkou. */
.profile-body > .block {
    scroll-margin-top: 76px;
}

/* --------------------------------------------------------------------------
   Obsah stránky
   -------------------------------------------------------------------------- */

.toc {
    position: sticky;
    /* Pod výškou hlavičky, ne pod nulou - jinak by se pod ni schoval. */
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    /* Vlastní scrollování obsahu nesmí strhnout stránku, když dojede na konec. */
    overscroll-behavior: contain;
}

.toc__head {
    margin: 0 0 10px;
    padding-left: 18px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-4);
}

.toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--border);
}

.toc__link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0 6px 17px;
    /* Překryje linku seznamu vlastní barvou, když je položka aktivní. */
    margin-left: -1px;
    border-left: 1px solid transparent;
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.35;
    text-decoration: none;
}

.toc__link:hover {
    color: var(--ink);
}

.toc__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--topic-accent, var(--acc-neutral));
    /* Neaktivní položky mají tečku ztlumenou, aby seznam nebyl duha. */
    opacity: 0.42;
    transition: opacity 0.12s ease;
}

.toc__link:hover .toc__dot,
.toc__link.is-active .toc__dot {
    opacity: 1;
}

.toc__link.is-active {
    border-left-color: var(--topic-accent, var(--acc-neutral));
    color: var(--ink);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Akcent v sekci
   -------------------------------------------------------------------------- */

/* Barevná značka u nadpisu sekce. Není to jediný nosič informace - vedle ní
   vždy stojí název sekce. */
.profile-body .section-head h2 {
    display: flex;
    align-items: center;
    gap: 9px;
}

.profile-body .section-head h2::before {
    content: '';
    flex: none;
    width: 3px;
    height: 15px;
    border-radius: 1px;
    background: var(--topic-accent, var(--acc-neutral));
}

/* Dlaždice dostane barvu tématu na horní hranu. Sjednocuje to blok čísel do
   jedné skupiny, aniž by barva něco tvrdila o hodnotách v ní. */
.profile-body .kpi {
    border-top: 2px solid var(--topic-accent, var(--acc-neutral));
}

.kpi__unit {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-3);
}

/* Pruhy v rozpadech se barví akcentem sekce. Je to měřítko jedné veličiny,
   takže všechny pruhy mají tutéž barvu - odlišuje je délka, ne odstín. */
.profile-body .dist__fill {
    background: var(--topic-accent, var(--accent));
}

.dist__foot {
    margin-top: 10px;
}

.cols-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gap);
    margin-bottom: 44px;
}

/* --------------------------------------------------------------------------
   Užší okna
   -------------------------------------------------------------------------- */

/* Pod 1080 px by sloupec s obsahem ukrojil z dat příliš. Obsah se překlopí
   nad stránku jako vodorovný pás - pořád je to navigace, jen neplave. */
@media (max-width: 1080px) {
    .profile-layout {
        display: block;
    }

    .toc {
        position: static;
        max-height: none;
        margin-bottom: 28px;
        overflow-x: auto;
    }

    .toc__head {
        display: none;
    }

    .toc__list {
        display: flex;
        gap: 6px;
        border-left: 0;
    }

    .toc__link {
        margin-left: 0;
        padding: 6px 12px;
        border: 1px solid var(--border);
        border-radius: 999px;
        white-space: nowrap;
    }

    .toc__link.is-active {
        border-color: var(--topic-accent, var(--acc-neutral));
    }
}

/* ==========================================================================
   15. Minigraf v dlaždici a dialog s velkým grafem
   ========================================================================== */

/* Dlaždice s minigrafem je vyšší; grid je srovná do stejné výšky, ale zdroj
   musí zůstat dole, aby řádky lícovaly. */
.kpi {
    display: flex;
    flex-direction: column;
}

.kpi__source {
    margin-top: auto;
}

.kpi .delta {
    margin-top: 6px;
}

.kpi__spark {
    display: block;
    margin-top: 12px;
    padding: 6px 0 0;
    color: inherit;
    text-decoration: none;
}

.kpi__spark svg {
    display: block;
    /* preserveAspectRatio="none" natáhne graf na šířku dlaždice. U čáry bez os
       to nevadí - tvar zůstane, jen se vodorovně roztáhne. */
    overflow: visible;
}

.spark__area {
    fill: var(--topic-accent, var(--accent));
    /* Slabá výplň jen zvýrazňuje čáru. Kdyby nesla vlastní význam, nesměla by
       stát na barvě - takhle je to jen podklad pod stejně barevnou čarou. */
    opacity: 0.12;
}

.spark__line {
    fill: none;
    stroke: var(--topic-accent, var(--accent));
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    /* Bez tohohle by se čára vodorovným roztažením ztenčila. */
    vector-effect: non-scaling-stroke;
}

.spark__last {
    fill: var(--topic-accent, var(--accent));
}

.kpi__spark-range {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    color: var(--ink-4);
}

/* Že je dlaždice proklikávací, se pozná i bez barvy - podtrhne se rozsah let. */
.kpi__spark:hover .kpi__spark-range,
.kpi__spark:focus-visible .kpi__spark-range {
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kpi__spark:hover .spark__area {
    opacity: 0.2;
}

/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */

.modal {
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 24px 64px rgb(0 0 0 / 22%);
}

.modal::backdrop {
    background: rgb(0 0 0 / 42%);
}

.modal__inner {
    position: relative;
    max-height: calc(100vh - 64px);
    padding: 24px 26px 26px;
    overflow-y: auto;
}

.modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--ink-3);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.modal__close:hover {
    color: var(--ink);
    border-color: var(--ink-4);
}

.metric-detail__where {
    margin: 0 0 2px;
    font-size: 12px;
    color: var(--ink-3);
}

.metric-detail__title {
    font-size: 19px;
}

.metric-detail__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    /* Místo pro křížek vpravo nahoře. */
    padding-right: 34px;
    margin-bottom: 14px;
}

.metric-detail__desc {
    margin: 0 0 16px;
    max-width: 62ch;
    color: var(--ink-2);
    font-size: 14px;
}

.metric-detail__table {
    margin-top: 16px;
    max-height: 260px;
    overflow-y: auto;
}

.metric-detail__foot {
    margin: 14px 0 0;
}

.metric-detail__loading {
    padding: 48px 0;
    text-align: center;
    color: var(--ink-3);
}

/* Nadpis karty s volbami a k němu účast vpravo. */
.volby__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.volby__head .dist__title {
    margin-bottom: 0;
}

/* ==========================================================================
   16. Prstencový graf a volby
   ========================================================================== */

/* Otočení o čtvrt kruhu: SVG kreslí obvod od tří hodin, graf má začínat nahoře.

   Šířku určuje CSS, ne atribut na značce: v úzké kartě se prstenec zmenší
   a nepřeteče. Strop drží velikost rozumnou i na širokém okně. */
.donut {
    flex: none;
    width: 100%;
    max-width: 180px;
    height: auto;
    transform: rotate(-90deg);
}

.donut__slice {
    fill: none;
    stroke: currentColor;
}

/* Prstenec nad seznamem, ne vedle něj.
   Karta voleb je v mřížce dvou sloupců široká zhruba 450 px. Když prstenec
   ubral 132 px, na řádek "název - pruh - procento - odchylka" zbylo tak málo,
   že se lámal na dva řádky a procento skončilo pod názvem. Nad sebou mají
   obě části celou šířku a řádek se vejde. */
.volby__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.volby__body .dist {
    width: 100%;
    min-width: 0;
}

/* V dialogu detailu voleb je místa dost, tam prstenec vedle seznamu zůstane. */
.metric-detail .volby__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
}

/* Barevná tečka u strany - váže řádek seznamu na díl prstence. Není jediným
   nosičem informace: název i procento stojí vedle. */
.dist__dot {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* Odchylka od nadřazeného celku. Znaménko nese informaci, barva ji jen
   zdůrazňuje - v černobílém tisku i při barvosleposti zůstane čitelná. */
.dist__diff {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
    white-space: nowrap;
}

.dist__diff.is-up { color: var(--pos); }
.dist__diff.is-down { color: var(--neg); }

.volby__compare {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}

/* Text metodiky v dialogu. */
.metodika h3 {
    margin: 18px 0 5px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

.metodika h3:first-child {
    margin-top: 0;
}

.metodika p {
    margin: 0;
    max-width: 68ch;
    font-size: 14px;
    color: var(--ink-2);
}

/* Přehled podřízených území: obce v okrese, okresy v kraji. */
.children .name {
    text-align: left;
    font-weight: 400;
    white-space: nowrap;
}

.children .rank {
    text-align: right;
    color: var(--ink-4);
}

/* Pruh a procento ve dvou pevných sloupcích.
   Buňka je zarovnaná doprava jako všechny číselné, takže při jednom inline
   pruhu a proměnlivě širokém procentu ("15,5 %" versus "7 %") začínal každý
   pruh jinde a délky se nedaly porovnat - a porovnávat délky je jediné,
   k čemu ten pruh je. */
.children__share {
    display: grid;
    grid-template-columns: 76px 3.6em;
    align-items: center;
    gap: 9px;
    justify-content: end;
}

th.children__share {
    display: table-cell;
    text-align: right;
}

.children__bar {
    width: 76px;
    height: 6px;
    border-radius: 2px;
    background: var(--surface-2);
    overflow: hidden;
}

.children__fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
}

.children__pct {
    font-size: 11px;
    text-align: right;
    color: var(--ink-3);
}

/* Rozpad uvnitř karty voleb: název, pruh, procento.
   Název má pevnou šířku, jinak by každý pruh začínal jinde a délky by se nedaly
   porovnat - a porovnávat délky je jediné, k čemu ten pruh je. */
.volby__body .dist__row,
.metric-detail .dist__row {
    display: grid;
    grid-template-columns: minmax(0, 11em) 1fr 4.2em;
    align-items: center;
    gap: 10px;
}

.volby__body .dist__label,
.metric-detail .dist__label {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Když je vedle procenta ještě odchylka, přibývá čtvrtý sloupec. */
.volby__body .dist__row:has(.dist__diff) {
    grid-template-columns: minmax(0, 11em) 1fr 4.2em 2.9em;
}


/* Souvislý text na statických stránkách.

   Vlastní třída, ne .prose: ta znamená "text s pohodlnou šířkou řádku" a má
   strop 70 znaků, což je správně pro stránku metodiky. Statické stránky mají
   jít přes celou šířku, takže si tu třídu brát nemají - dřív si ji braly
   a text pak skončil v levé polovině stránky. */
.page-text p {
    margin: 0 0 12px;
    color: var(--ink-2);
}

.page-text p:last-child {
    margin-bottom: 0;
}

.page-text strong {
    color: var(--ink);
    font-weight: 600;
}

.page-text code {
    padding: 2px 6px;
    background: var(--surface-2);
    border-radius: 3px;
    font-size: 12px;
}

.page-text h2 {
    margin: 26px 0 10px;
    font-size: 15px;
}

.page-text h2:first-child {
    margin-top: 0;
}

/* Doslovné znění licence.
 *
 * Na rozdíl od ostatních stránek se tenhle text nepíše, jen reprodukuje, takže
 * jediné, co se dá udělat, je zařídit, aby se dal číst: šířka řádku, odsazení
 * úrovní a číslování.
 *
 * Číslování musí sedět na odkazy uvnitř textu. Licence se sama na sebe odkazuje
 * jako na "Článek 3, odst. a) 1. A. i.", a ty odkazy vedou na kotvy typu
 * #s3a1Ai. Kdyby se všechny úrovně číslovaly stejně (výchozí decimal), byly by
 * všechny takové odkazy v textu nesmyslné. */
/* Žádný strop na šířku: vedle není postranní sloupec, takže by omezení
   nechalo půlku stránky prázdnou - stejná chyba jako kdysi u .prose. */
.legalcode {
    color: var(--ink-2);
    line-height: 1.65;
}

.legalcode h1 {
    margin: 0 0 20px;
    font-size: 22px;
}

.legalcode h3 {
    margin: 28px 0 10px;
    font-size: 15px;
    color: var(--ink);
}

.legalcode p {
    margin: 0 0 12px;
}

.legalcode strong {
    color: var(--ink);
    font-weight: 600;
}

.legalcode ol {
    margin: 0 0 12px;
    padding-left: 26px;
}

.legalcode li {
    margin-bottom: 8px;
}

.legalcode li:last-child {
    margin-bottom: 0;
}

.legalcode li > ol {
    margin-top: 8px;
}

/* Úrovně zanoření: a) → 1. → A. → i. */
.legalcode ol {
    list-style-type: lower-alpha;
}

.legalcode ol ol {
    list-style-type: decimal;
}

.legalcode ol ol ol {
    list-style-type: upper-alpha;
}

.legalcode ol ol ol ol {
    list-style-type: lower-roman;
}

/* Cíl odkazu uvnitř licence se nemá schovat pod lepkavou hlavičku. */
.legalcode [id] {
    scroll-margin-top: 80px;
}

/* Odkaz na originál stojí pod textem a nemá vypadat jako jeho poslední odstavec. */
.legalcode__origin {
    margin: 24px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

/* Detail voleb má kartu přes celou šířku stránky, takže se prstenec vedle
   seznamu vejde i s odchylkami. */
.volby__body--wide {
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
}

.volby__body--wide .dist {
    width: auto;
    flex: 1;
}

/* Tabulka pod grafem na profilu strany. Řádků je nejvýš sedm, takže se vejde
   celá a nemusí mít vlastní scrollování. */
.party-table {
    margin-top: 14px;
}

/* ==========================================================================
   18. Státní dluh
   ========================================================================== */

.debt {
    text-align: center;
}

.debt__label {
    margin: 0 0 6px;
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

/* Číslo je široké a mění se každý snímek. Bez tabulkových číslic by
   poskakovalo do stran, jak se mění šířka jednotlivých cifer. */
.debt__value {
    margin: 0;
    font-size: clamp(28px, 6vw, 54px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.debt__per-capita {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.debt__note {
    margin: 18px auto 0;
    max-width: 72ch;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
    color: var(--ink-2);
}

/* Velké číslo v kartě umístění. */
.stat-big {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.stat-big .muted {
    font-size: 15px;
    font-weight: 400;
}

/* Seznam nejbližších obcí: název vlevo, vzdálenost vpravo. */
.nearby {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nearby li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13.5px;
}

.nearby li:last-child {
    border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hlavička profilu území
   -------------------------------------------------------------------------- */

.profile-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-bottom: 14px;
}

.profile-head__main h1 {
    margin: 2px 0 0;
    font-size: 32px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.profile-head__parents {
    margin: 7px 0 0;
    font-size: 13.5px;
    color: var(--ink-2);
}

/* Hlavní číslo patří do hlavičky, ne mezi padesát dlaždic - je to údaj,
   kvůli kterému čtenář na stránku přišel. */
.profile-head__headline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.profile-head__headline-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

.profile-head__headline-value {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
}

/* Doplňkové údaje pod hlavičkou. Vodorovně vedle sebe, oddělené linkou -
   dřív to byl svislý výpis, který zabíral půl obrazovky. */
.facts--head {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin: 0 0 26px;
    padding: 12px 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.facts--head > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.facts--head dt {
    margin: 0;
    font-size: 12px;
    color: var(--ink-3);
}

.facts--head dd {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

/* Souřadnice a kód RÚIAN jsou pro toho, kdo pracuje s daty. Zůstávají,
   jen potichu a odsunuté doprava. */
.facts__quiet {
    margin-left: auto;
}

.facts__quiet dd {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--ink-3);
}

@media (max-width: 720px) {
    .profile-head__headline {
        align-items: flex-start;
        text-align: left;
    }

    .facts__quiet {
        margin-left: 0;
    }
}

/* První položka obsahu vede zpět nahoru. Vizuálně oddělená, protože to není
   sekce stránky, ale návrat na začátek. */
.toc__link--top {
    font-weight: 500;
    color: var(--ink);
}

.toc__link--top .toc__dot {
    border-radius: 2px;
    opacity: 0.55;
}

.toc__list > li:first-child {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border-soft);
}