/* Kde žít (www.kdezit.cz) — "atlas": ivory paper + deep emerald + brass, editorial serif headings, quiet data.
   Fonts: Playfair Display (display, OFL) + Inter (text and figures, OFL), self-hosted latin + latin-ext subsets.
   Colours are defined once with light-dark(); color-scheme follows the system unless the visitor picked a theme. */

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("fonts/playfair-normal-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: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("fonts/playfair-normal-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;
}

@font-face {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("fonts/playfair-italic-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: "Playfair Display";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("fonts/playfair-italic-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;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-normal-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: 100 900;
    font-display: swap;
    src: url("fonts/inter-normal-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;
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
    color-scheme: light dark;

    /* type */
    --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
    --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --step--2: clamp(.72rem, .7rem + .08vw, .78rem);
    --step--1: clamp(.82rem, .8rem + .1vw, .89rem);
    --step-0: clamp(.97rem, .94rem + .15vw, 1.05rem);
    --step-1: clamp(1.12rem, 1.05rem + .35vw, 1.32rem);
    --step-2: clamp(1.38rem, 1.2rem + .85vw, 1.95rem);
    --step-3: clamp(1.8rem, 1.42rem + 1.8vw, 2.9rem);
    --step-4: clamp(2.25rem, 1.6rem + 3.1vw, 4.3rem);
    --step-5: clamp(2.6rem, 1.6rem + 4.8vw, 5.9rem);

    /* space */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
    --gutter: clamp(16px, 4vw, 56px);
    --section: clamp(48px, 6vw, 112px);
    --wrap: 1320px;
    --wrap-wide: 1560px;
    --measure: 68ch;

    /* shape */
    --r-sm: 8px;
    --r: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --pill: 999px;

    /* motion */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --t-fast: .16s;
    --t: .32s;

    /* surfaces and ink */
    --bg: light-dark(#f6f3ec, #0b100e);
    --bg-deep: light-dark(#efe9dd, #0e1512);
    --surface: light-dark(#fffdf8, #121a17);
    --surface-2: light-dark(#f9f6ef, #17201c);
    --surface-glass: light-dark(rgb(250 247 240 / .82), rgb(11 16 14 / .78));
    --ink: light-dark(#131a17, #f0ebe1);
    --ink-2: light-dark(#3f4843, #c9cbc3);
    --muted: light-dark(#5f6761, #9aa29b);
    --line: light-dark(rgb(19 26 23 / .09), rgb(240 235 225 / .08));
    --line-strong: light-dark(rgb(19 26 23 / .17), rgb(240 235 225 / .17));
    --accent: light-dark(#0f5f47, #5fc39b);
    --accent-strong: light-dark(#0a4a37, #82d6b2);
    --accent-ink: light-dark(#fffdf8, #08100c);
    --accent-soft: light-dark(rgb(15 95 71 / .08), rgb(95 195 155 / .1));
    --brass: light-dark(#7d5f28, #d9b874);
    --brass-line: light-dark(rgb(184 131 42 / .45), rgb(217 184 116 / .4));
    --brass-soft: light-dark(rgb(184 131 42 / .1), rgb(217 184 116 / .1));
    --emerald-deep: #0c3b2e;
    --good: light-dark(#0a7a3d, #3ec27a);
    --bad: light-dark(#a83a24, #f08a6c);
    --shadow-color: light-dark(rgb(49 40 22 / .08), rgb(0 0 0 / .45));
    --shadow-sm: 0 1px 2px var(--shadow-color);
    --shadow: 0 1px 2px var(--shadow-color), 0 12px 32px -14px var(--shadow-color);
    --shadow-lg: 0 2px 6px var(--shadow-color), 0 30px 70px -30px light-dark(rgb(49 40 22 / .28), rgb(0 0 0 / .8));
    --header-bg: light-dark(rgb(246 243 236 / .82), rgb(11 16 14 / .78));

    /* charts: categorical slots (validated, light surface #fffdf8 / dark surface #121a17) */
    --viz-1: light-dark(#0f7f5e, #2a9a78);
    --viz-2: light-dark(#b8832a, #b8852f);
    --viz-3: light-dark(#3f6fb5, #5b88d1);
    --viz-4: light-dark(#c4583a, #d06a4a);
    --viz-5: light-dark(#8e4e8a, #9f63b8);
    --viz-6: light-dark(#6b8a2a, #7a9d36);
    --viz-7: light-dark(#4b47a0, #7f7bdc);
    --viz-8: light-dark(#d0708f, #cf6f92);
    --viz-muted: light-dark(#b9b4a8, #4a524d);
    --viz-grid: light-dark(#ebe6db, #222b27);
    --viz-axis: light-dark(#cfc8b9, #39433e);
    --viz-label: light-dark(#5f6761, #9aa29b);
    --viz-area: light-dark(rgb(15 127 94 / .1), rgb(42 154 120 / .14));
    /* sequential (maps), light→dark = less→more */
    --seq-1: light-dark(#c3e8d7, #103627);
    --seq-2: light-dark(#9eceb7, #1a4e3a);
    --seq-3: light-dark(#78b399, #24684f);
    --seq-4: light-dark(#54997c, #328264);
    --seq-5: light-dark(#2e8061, #449e7b);
    --seq-6: light-dark(#006647, #59b993);
    --seq-7: light-dark(#004d2f, #73d4ac);
    /* ordinal score tiers 1 (weak) … 5 (excellent) */
    --tier-1: light-dark(#79bb9e, #275f49);
    --tier-2: light-dark(#559f80, #377e62);
    --tier-3: light-dark(#308364, #4a9f7d);
    --tier-4: light-dark(#006749, #62c09a);
    --tier-5: light-dark(#004d2f, #80e2b9);
    /* diverging: below average (copper) ↔ neutral ↔ above average (sapphire) */
    --div-neg-3: light-dark(#9c3a11, #e0805d);
    --div-neg-2: light-dark(#ac6b55, #b8705a);
    --div-neg-1: light-dark(#dcbcb1, #6e4b40);
    --div-mid: light-dark(#ece8df, #2c3330);
    --div-pos-1: light-dark(#adc0d8, #3b5372);
    --div-pos-2: light-dark(#50739f, #5b80b3);
    --div-pos-3: light-dark(#154d8c, #8db4e6);
}

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

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--step-0);
    line-height: 1.6;
    font-feature-settings: "cv11", "ss01";
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-weight: 600;
    line-height: 1.12;
    color: var(--ink);
    text-wrap: balance;
}

h1, h2, .display {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -.012em;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }
h4 { font-size: var(--step-0); }

h1 em, h2 em, .display em { font-style: italic; color: var(--accent); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}

a:hover { color: var(--accent-strong); text-decoration-color: currentColor; }

:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: var(--brass-soft); color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

abbr[title] { text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }

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

.skip {
    position: absolute;
    left: var(--s-4);
    top: -100px;
    z-index: 100;
    padding: var(--s-2) var(--s-4);
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-sm);
}

.skip:focus { top: var(--s-4); }

.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   Layout
   ========================================================================== */

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

.wrap--wide { max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); }
.wrap--narrow { max-width: calc(860px + 2 * var(--gutter)); }

.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section--deep { background: var(--bg-deep); border-block: 1px solid var(--line); }
.section--deep + .section { padding-top: var(--section); }

.stack > * + * { margin-top: var(--s-5); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.site-main { min-height: 60vh; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    min-height: 68px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    flex-shrink: 0;
}

.brand:hover { color: var(--ink); }
.brand__mark { width: 34px; height: 34px; flex-shrink: 0; }

.brand__name {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
}

.brand__name em { font-style: italic; color: var(--accent); }

.nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: var(--s-3);
}

.nav__link {
    position: relative;
    padding: 8px 12px;
    border-radius: var(--pill);
    color: var(--ink-2);
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.nav__link:hover { color: var(--ink); background: var(--accent-soft); }

.nav__link[aria-current="page"] { color: var(--ink); }

.nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 2px;
    height: 1px;
    background: var(--brass);
}

.site-header__tools {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-btn svg { width: 19px; height: 19px; }

.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}

.menu-btn { display: none; }

@media (max-width: 1220px) {
    .nav { display: none; }
    .menu-btn { display: inline-grid; }
}
/* nine menu items next to the search box: tighter links and a narrower box until the header has room */
@media (min-width: 1221px) and (max-width: 1440px) {
    .nav__link { padding-inline: 9px; }
    .site-header .search__input { width: 150px; }
}

/* mobile menu (Popover API; without support the links stay in the footer) */
.menu {
    inset: 0 0 auto auto;
    width: min(360px, 100vw);
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: var(--s-6) var(--s-5);
    border: 0;
    border-left: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.menu::backdrop { background: rgb(8 12 10 / .4); backdrop-filter: blur(2px); }

.menu__title {
    margin: 0 0 var(--s-4);
    color: var(--brass);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.menu__list { list-style: none; margin: 0 0 var(--s-6); padding: 0; }

.menu__link {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--step-2);
    text-decoration: none;
}

.menu__link[aria-current="page"] { color: var(--accent); }

/* ==========================================================================
   Search
   ========================================================================== */

.search { position: relative; }

.search__field {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: 40px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--surface);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.search__field:focus-within { border-color: var(--brass-line); box-shadow: 0 0 0 4px var(--brass-soft); }
.search__icon { flex-shrink: 0; color: var(--muted); }

.search__input {
    flex: 1;
    min-width: 0;
    width: 220px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--step--1);
}

.search__input::placeholder { color: var(--muted); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__kbd {
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    font: 500 .72rem/1.5 var(--font-text);
}

.search--hero .search__field {
    height: 64px;
    padding: 0 8px 0 22px;
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.search--hero .search__input { width: 100%; font-size: var(--step-1); }

.search__submit {
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--pill);
    background: var(--accent);
    color: var(--accent-ink);
    font: 600 var(--step--1)/1 var(--font-text);
    letter-spacing: .01em;
    cursor: pointer;
}

.search__submit:hover { background: var(--accent-strong); }

.suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    min-width: 300px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.suggest[hidden] { display: none; }

.suggest__item a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
}

.suggest__item a:hover, .suggest__item[aria-selected="true"] a { background: var(--accent-soft); }
.suggest__name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.suggest__meta { color: var(--muted); font-size: var(--step--2); line-height: 1.3; }

/* the header box is narrow: the list grows to the left so long names fit on one line */
.site-header .suggest { left: auto; width: max(100%, 380px); max-width: calc(100vw - 32px); }

@media (max-width: 760px) {
    .site-header .search { display: none; }
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--s-3);
    color: var(--brass);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.kicker::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .7;
}

.lead {
    max-width: var(--measure);
    color: var(--ink-2);
    font-size: var(--step-1);
    line-height: 1.55;
}

.prose { max-width: var(--measure); }
.prose p, .prose li { color: var(--ink-2); }
.prose h2 { margin-top: 1.4em; font-size: var(--step-2); }
.prose h3 { margin-top: 1.3em; }

.note {
    color: var(--muted);
    font-size: var(--step--1);
}

.source {
    margin: var(--s-3) 0 0;
    color: var(--muted);
    font-size: var(--step--2);
    line-height: 1.5;
}

.source a { color: inherit; }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
    margin-bottom: var(--s-6);
}

.section-head h2 { margin: 0; }
.section-head p { margin: var(--s-3) 0 0; max-width: 62ch; color: var(--ink-2); }

.more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: var(--accent);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.more-link:hover { text-decoration: underline; }

/* ==========================================================================
   Buttons, chips, pills
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--pill);
    background: var(--accent);
    color: var(--accent-ink);
    font: 600 var(--step--1)/1 var(--font-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn:hover { background: var(--accent-strong); color: var(--accent-ink); }

.btn--ghost {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--ink);
}

.btn--ghost:hover { background: var(--surface); border-color: var(--brass-line); color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

/* a long label (e.g. map layer names on /statistiky) must not push the page wider than a phone */
.chip { max-width: 100%; }
@media (max-width: 480px) { .chip { white-space: normal; padding-block: 6px; line-height: 1.3; } }

.chip:hover { border-color: var(--brass-line); color: var(--ink); }
.chip[aria-current="page"], .chip.is-active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--pill);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--step--2);
    font-weight: 600;
    white-space: nowrap;
}

.pill--good { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); }
.pill--bad { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.pill--brass { background: var(--brass-soft); color: var(--brass); }

/* ==========================================================================
   Cards and panels
   ========================================================================== */

.panel {
    position: relative;
    padding: clamp(18px, 2.2vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.panel--flush { padding: 0; overflow: hidden; }
.panel__title { margin: 0 0 var(--s-2); font-size: var(--step-1); }
.panel__sub { margin: 0 0 var(--s-5); color: var(--muted); font-size: var(--step--1); }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

a.card:hover { transform: translateY(-2px); border-color: var(--brass-line); box-shadow: var(--shadow); color: var(--ink); }

.card__kicker { color: var(--brass); font-size: var(--step--2); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.card__title { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.15; }
.card__text { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.card__foot { margin-top: auto; padding-top: var(--s-3); color: var(--muted); font-size: var(--step--2); }

/* ==========================================================================
   Figures: stat tiles, hero numbers, meters
   ========================================================================== */

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--line);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: var(--s-5);
    background: var(--surface);
}

.stat__label {
    order: 0;
    color: var(--muted);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stat__value {
    order: 1;
    margin: 0;
    color: var(--ink);
    font-size: var(--step-2);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.stat__unit { margin-left: 3px; color: var(--muted); font-size: .55em; font-weight: 500; letter-spacing: 0; }
.stat__sub { order: 2; color: var(--muted); font-size: var(--step--2); }
.stat__delta { font-weight: 600; }
.stat__delta--good { color: var(--good); }
.stat__delta--bad { color: var(--bad); }

.meter {
    position: relative;
    height: 6px;
    border-radius: var(--pill);
    background: var(--div-mid);
    overflow: hidden;
}

.meter__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--viz-1);
}

.meter__tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--ink-2);
    opacity: .55;
}

/* overall index: hero figure (sans, per the data-viz rules) */
.index {
    display: grid;
    gap: var(--s-3);
}

.index__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(3.4rem, 2.6rem + 3vw, 5.4rem);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: .95;
}

.index__max { color: var(--muted); font-size: .3em; font-weight: 500; letter-spacing: 0; }
.index__label { margin: 0; color: var(--brass); font-size: var(--step--2); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.index__rank { margin: 0; color: var(--ink-2); font-size: var(--step--1); }

.tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--step--2);
    font-weight: 600;
}

.tier__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--tier-3); }

/* category scores */
.scores { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }

.score-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 42px;
    align-items: center;
    gap: var(--s-3);
}

.score-row__icon { color: var(--brass); }
.score-row__label { display: flex; justify-content: space-between; gap: var(--s-2); margin-bottom: 6px; font-size: var(--step--1); font-weight: 500; }
.score-row__label a { color: var(--ink); text-decoration: none; }
.score-row__label a:hover { color: var(--accent); }
.score-row__value { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Breadcrumbs, section tabs
   ========================================================================== */

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--s-5);
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: var(--step--2);
}

.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.tabs {
    position: sticky;
    top: 68px;
    z-index: 40;
    border-bottom: 1px solid var(--line);
    background: var(--header-bg);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.tabs__list {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 8px 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar { display: none; }

.tabs__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--pill);
    color: var(--ink-2);
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.tabs__link:hover { background: var(--accent-soft); color: var(--ink); }
.tabs__link.is-current { background: var(--ink); color: var(--bg); }

/* desktop: arrows and wheel scrolling when the tabs overflow (touch devices swipe) */
.tabs__wrap { position: relative; }
.tabs__list.is-dragging { cursor: grabbing; user-select: none; }
.tabs__list.is-dragging .tabs__link { pointer-events: none; }

.tabs__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0 0 3px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--ink);
    font: 600 1.25rem/1 var(--font-text);
    cursor: pointer;
    transform: translateY(-50%);
}

.tabs__arrow:hover { border-color: var(--brass-line); }
.tabs__arrow[hidden] { display: none; }
.tabs__arrow--prev { left: 4px; }
.tabs__arrow--next { right: 4px; }
.tabs__wrap.has-prev .tabs__list { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px); mask-image: linear-gradient(90deg, transparent 0, #000 56px); }
.tabs__wrap.has-next .tabs__list { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 56px); mask-image: linear-gradient(270deg, transparent 0, #000 56px); }
.tabs__wrap.has-prev.has-next .tabs__list { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }

@media (hover: none) {
    .tabs__arrow { display: none; }
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* relative: clips the visually-hidden cell texts, which would otherwise widen the page on phones */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
}

.data-table caption { margin-bottom: var(--s-3); color: var(--muted); font-size: var(--step--2); text-align: left; }

.data-table th, .data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.data-table thead th {
    color: var(--muted);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tr.is-self { background: var(--accent-soft); }
.data-table tr.is-self td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.data-table a { color: var(--ink); font-weight: 600; text-decoration: none; }
.data-table a:hover { color: var(--accent); text-decoration: underline; }

/* ranking list */
.ranking { counter-reset: none; }

.rank-pos {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rank-pos--top { background: var(--brass-soft); color: var(--brass); }

.bar-cell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.bar-cell__track { flex: 1; height: 6px; border-radius: var(--pill); background: var(--div-mid); overflow: hidden; }
.bar-cell__fill { display: block; height: 100%; border-radius: inherit; background: var(--viz-1); }
.bar-cell__value { min-width: 34px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Charts (App\Chart\ChartFactory + templates/chart/*): lines are SVG paths in a stretched viewBox with
   non-scaling strokes, bars are HTML boxes, every text is HTML – crisp at any width.
   ========================================================================== */

/* colour slots: every mark reads --c */
.s-1 { --c: var(--viz-1); } .s-2 { --c: var(--viz-2); } .s-3 { --c: var(--viz-3); } .s-4 { --c: var(--viz-4); }
.s-5 { --c: var(--viz-5); } .s-6 { --c: var(--viz-6); } .s-7 { --c: var(--viz-7); } .s-8 { --c: var(--viz-8); }
.s-muted { --c: var(--viz-muted); } .s-neg { --c: var(--div-neg-2); } .s-pos { --c: var(--div-pos-2); }
.t-1 { --c: var(--tier-1); } .t-2 { --c: var(--tier-2); } .t-3 { --c: var(--tier-3); } .t-4 { --c: var(--tier-4); } .t-5 { --c: var(--tier-5); }
.s-ref { --c: var(--ink-2); }

.chart { margin: 0; min-width: 0; }
.chart__head { margin-bottom: var(--s-4); }
.chart__title { margin: 0; font-family: var(--font-text); font-size: var(--step-0); font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.chart__sub { margin: 4px 0 0; color: var(--muted); font-size: var(--step--2); }
.chart__body { position: relative; }

.chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: var(--s-4) 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-2);
    font-size: var(--step--2);
}

.chart__legend li { display: inline-flex; align-items: center; gap: 7px; }
.key { display: inline-block; flex-shrink: 0; background: var(--c); }
.key--line { width: 16px; height: 2px; border-radius: 2px; }
.key--bar { width: 11px; height: 11px; border-radius: 3px; }
.key--ref { width: 2px; height: 12px; border-radius: 1px; opacity: .7; }

.chart__table { margin-top: var(--s-3); }

.chart__table > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: var(--step--2);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.chart__table > summary::-webkit-details-marker { display: none; }
.chart__table > summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 11px; line-height: 1; }
.chart__table[open] > summary::before { content: "\2212"; }
.chart__table > summary:hover { color: var(--ink); }
.chart__table .data-table { margin-top: var(--s-3); font-size: var(--step--2); }
.chart__table .data-table th, .chart__table .data-table td { padding: 6px 10px; }

.chart-empty {
    display: grid;
    place-items: center;
    min-height: 140px;
    padding: var(--s-5);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    color: var(--muted);
    font-size: var(--step--1);
    text-align: center;
}

/* plot frame: y labels | plot area, x labels below */
.plot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: var(--plot-h, 240px) auto;
    column-gap: 10px;
    color: var(--viz-label);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.plot__y { position: relative; min-width: 28px; }
.plot__y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.plot__area { position: relative; min-width: 0; }
.plot__area > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot__area > svg * { vector-effect: non-scaling-stroke; }
.plot__x { position: relative; grid-column: 2; height: 22px; }
.plot__x span { position: absolute; top: 8px; transform: translateX(-50%); white-space: nowrap; }
.plot__x span:first-child { transform: none; }
.plot__x span:last-child { transform: translateX(-100%); }
.plot--columns .plot__x span, .plot--columns .plot__x span:first-child, .plot--columns .plot__x span:last-child { transform: translateX(-50%); }

.c-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.c-axis { stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges; }
.c-ref { stroke: var(--ink-2); stroke-width: 1; stroke-opacity: .5; }
.c-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-area { fill: color-mix(in srgb, var(--c) 11%, transparent); stroke: none; }

.plot__dot {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--c);
    box-sizing: content-box;
    transform: translate(-1px, -1px);
    pointer-events: none;
}

.plot__end {
    position: absolute;
    padding: 0 0 6px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transform: translate(-100%, -100%);
    pointer-events: none;
}

.plot__ref {
    position: absolute;
    left: 0;
    padding: 0 0 4px;
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transform: translateY(-100%);
    pointer-events: none;
}

.plot__cross {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--ink-2);
    opacity: .4;
    pointer-events: none;
}

.plot__cross[hidden] { display: none; }

/* columns */
.cols { position: absolute; inset: 0; }
.cols__group { position: absolute; top: 0; bottom: 0; }
.cols__bar { position: absolute; display: block; }

.cols__bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    width: min(calc(100% - 2px), 24px);
    border-radius: 4px 4px 0 0;
    background: var(--c);
    transform: translateX(-50%);
    transition: opacity var(--t-fast) var(--ease);
}

.cols__bar.is-neg::before { border-radius: 0 0 4px 4px; }
.cols__bar:hover::before { opacity: .75; }
.cols__zero { position: absolute; left: 0; right: 0; height: 1px; background: var(--viz-axis); }

/* horizontal bars */
.hbars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }

.hbars__row {
    display: grid;
    grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.hbars__label { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.hbars__label a { color: inherit; text-decoration: none; }
.hbars__label a:hover { color: var(--accent); text-decoration: underline; }
.hbars__label small { margin-left: 6px; color: var(--muted); font-size: var(--step--2); }
.hbars__row.is-self .hbars__label { color: var(--ink); font-weight: 700; }
.hbars__track { position: relative; height: 12px; }
.hbars__bar { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--c); }
.hbars__bar.is-neg { border-radius: 4px 0 0 4px; }
.hbars__zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--viz-axis); }
.hbars__value { min-width: 54px; color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 100 % stacked bars */
.stack-rows { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.stack-rows__row { display: grid; grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); align-items: center; gap: 12px; }
.stack-rows__label { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.stack-rows__row.is-self .stack-rows__label { color: var(--ink); font-weight: 700; }
.stack-rows__track { display: flex; gap: 2px; height: 26px; }

.stack-rows__part {
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: hidden;
    background: var(--c);
    color: light-dark(#fff, #06120d);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stack-rows__part:first-child { border-radius: 4px 0 0 4px; }
.stack-rows__part:last-child { border-radius: 0 4px 4px 0; }
.stack-rows__part.t-1, .stack-rows__part.t-2 { color: light-dark(#0b2a20, #e9f6ef); }
.stack-rows__part.t-3 { color: light-dark(#fff, #e9f6ef); }

/* age pyramid */
.pyramid { display: grid; gap: 3px; font-size: 11px; font-variant-numeric: tabular-nums; }
.pyramid__row { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; gap: 6px; height: 15px; }
.pyramid__label { color: var(--viz-label); text-align: center; white-space: nowrap; }
.pyramid__side { position: relative; height: 100%; }
.pyramid__bar { position: absolute; top: 1px; bottom: 1px; background: var(--c); }
.pyramid__side--m .pyramid__bar { right: 0; border-radius: 3px 0 0 3px; }
.pyramid__side--f .pyramid__bar { left: 0; border-radius: 0 3px 3px 0; }
.pyramid__ref { position: absolute; top: -1px; bottom: -1px; width: 2px; border-radius: 1px; background: var(--ink-2); opacity: .55; }
.pyramid__axis { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 6px; margin-top: 6px; color: var(--viz-label); }
.pyramid__ticks { position: relative; height: 14px; }
.pyramid__ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* distribution strip */
.dist { position: relative; padding-top: 34px; }
.dist__bins { position: relative; height: 54px; }
.dist__bin { position: absolute; bottom: 0; padding: 0 1px; }
.dist__bin::before { content: ""; position: absolute; inset: 0 1px; border-radius: 2px 2px 0 0; background: var(--viz-muted); opacity: .7; }
.dist__base { height: 1px; background: var(--viz-axis); }
.dist__mark { position: absolute; top: 34px; height: 54px; width: 1px; background: var(--ink-2); opacity: .6; }
.dist__mark-label { position: absolute; top: calc(100% + 4px); transform: translateX(-50%); color: var(--muted); font-size: 11px; white-space: nowrap; }
.dist__self { position: absolute; top: 18px; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); }
.dist__self::after { content: ""; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); box-sizing: content-box; transform: translate(-1px, -1px); }
.dist__self-label { position: absolute; top: 0; transform: translateX(-50%); color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.dist__ends { display: flex; justify-content: space-between; margin-top: 26px; color: var(--muted); font-size: 11px; }

/* tooltip (public/js/charts.js) */
.tooltip {
    position: fixed;
    z-index: 90;
    min-width: 120px;
    max-width: 280px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--ink-2);
    font-size: var(--step--2);
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.tooltip.is-visible { opacity: 1; transform: none; }
.tooltip__title { margin: 0 0 6px; color: var(--muted); font-weight: 600; }
.tooltip__row { display: flex; align-items: center; gap: 8px; }
.tooltip__row + .tooltip__row { margin-top: 3px; }
.tooltip__key { width: 12px; height: 2px; border-radius: 2px; background: var(--c); }
.tooltip__value { color: var(--ink); font-size: 1.1em; font-weight: 700; font-variant-numeric: tabular-nums; }

/* stat tile sparkline */
.spark { display: block; width: 100%; height: 30px; margin-top: 6px; overflow: visible; }
.spark path { vector-effect: non-scaling-stroke; }
.spark__line { fill: none; stroke: var(--viz-1); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark__area { fill: color-mix(in srgb, var(--viz-1) 10%, transparent); }

/* percentile strip rows (indicator position among all municipalities) */
.strip { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.strip__row { display: grid; gap: 6px; }
.strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--step--1); }
.strip__name { color: var(--ink-2); font-weight: 500; }
.strip__value { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip__note { color: var(--muted); font-size: var(--step--2); }

/* ==========================================================================
   Maps
   ========================================================================== */

.map svg { display: block; width: 100%; height: auto; }
.map .m-area { stroke: var(--surface); stroke-width: .8; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: opacity var(--t-fast) var(--ease); }
.map .m-area:hover { opacity: .82; }
.map .m-border { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-opacity: .55; vector-effect: non-scaling-stroke; pointer-events: none; }
.map .m-outline { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-opacity: .7; vector-effect: non-scaling-stroke; pointer-events: none; }
.map .m-base { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: .8; vector-effect: non-scaling-stroke; }
.map .m-focus { fill: var(--accent); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map .m-pin { fill: var(--brass); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map .m-label { fill: var(--ink); font: 600 13px var(--font-text); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.map .m-nodata { fill: var(--div-mid); }
.m-q1 { fill: var(--seq-1); } .m-q2 { fill: var(--seq-2); } .m-q3 { fill: var(--seq-3); } .m-q4 { fill: var(--seq-4); }
.m-q5 { fill: var(--seq-5); } .m-q6 { fill: var(--seq-6); } .m-q7 { fill: var(--seq-7); }

.scale-legend { display: flex; align-items: center; gap: 10px; margin-top: var(--s-3); color: var(--muted); font-size: var(--step--2); }
.scale-legend__ramp { display: flex; gap: 2px; }
.scale-legend__ramp span { width: 26px; height: 10px; border-radius: 2px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    margin-top: var(--section);
    padding: var(--s-8) 0 var(--s-7);
    border-top: 1px solid var(--line);
    background: var(--bg-deep);
    color: var(--ink-2);
    font-size: var(--step--1);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--s-7);
}

.site-footer__title {
    margin: 0 0 var(--s-3);
    color: var(--brass);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 0 0 8px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__about p { max-width: 42ch; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--step--2);
}

@media (max-width: 960px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page heads
   ========================================================================== */

.page-head { padding: clamp(28px, 4vw, 64px) 0 clamp(24px, 3vw, 44px); }
.page-head h1 { max-width: 20ch; margin-bottom: var(--s-4); }
.page-head .lead { margin: 0; }

/* ==========================================================================
   Home
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(56px, 9vw, 150px) 0 clamp(48px, 7vw, 110px);
    border-bottom: 1px solid var(--line);
}

.hero__contours {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    color: var(--brass);
    opacity: .22;
    pointer-events: none;
}

.hero__contours path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

.hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.hero h1 { font-size: var(--step-5); line-height: 1.02; margin-bottom: var(--s-5); }
.hero .lead { margin-bottom: var(--s-6); }
.hero__search { max-width: 640px; }
.hero__hints { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); color: var(--muted); font-size: var(--step--2); }
.hero__hints a { color: var(--ink-2); }
.hero__map { position: relative; }

@media (max-width: 960px) {
    .hero__inner { grid-template-columns: 1fr; }
}

.feature-list { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }

.feature {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--s-4);
    align-items: start;
}

.feature__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--brass-line);
    border-radius: 12px;
    color: var(--brass);
}

.feature__title { margin: 0 0 4px; font-size: var(--step-0); }
.feature__text { margin: 0; color: var(--ink-2); font-size: var(--step--1); }

/* ==========================================================================
   Municipality detail
   ========================================================================== */

.place-hero {
    padding: clamp(24px, 3vw, 48px) 0 clamp(28px, 3.5vw, 56px);
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(1200px 400px at 85% -10%, var(--brass-soft), transparent 70%),
        var(--bg);
}

.place-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
}

.place-hero__title { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.place-hero__arms { flex-shrink: 0; width: clamp(64px, 7vw, 104px); }
.place-hero__arms img { width: 100%; height: auto; filter: drop-shadow(0 6px 14px var(--shadow-color)); }
.place-hero h1 { margin: 0; font-size: var(--step-5); line-height: 1; }
.place-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: var(--s-4) 0 0; color: var(--ink-2); font-size: var(--step--1); }
.place-hero__meta a { color: var(--ink-2); }
.place-hero__lead { max-width: 64ch; margin: var(--s-5) 0 0; color: var(--ink-2); font-size: var(--step-0); }
.place-hero .kpis { margin-top: var(--s-6); }

.index-panel { display: grid; gap: var(--s-5); }

@media (max-width: 960px) {
    .place-hero__grid { grid-template-columns: 1fr; }
}

.topic { padding-block: clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--line); }
.topic:last-of-type { border-bottom: 0; }

.topic__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}

.topic__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--brass-line);
    border-radius: 16px;
    background: var(--surface);
    color: var(--brass);
}

.topic__head h2 { margin: 0; font-size: var(--step-3); }
.topic__summary { margin: 6px 0 0; color: var(--ink-2); max-width: 70ch; }

.topic__score {
    display: grid;
    justify-items: end;
    gap: 2px;
    color: var(--muted);
    font-size: var(--step--2);
}

.topic__score strong { color: var(--ink); font-size: var(--step-2); font-weight: 600; letter-spacing: -.02em; line-height: 1; }

@media (max-width: 640px) {
    .topic__head { grid-template-columns: auto minmax(0, 1fr); }
    .topic__score { grid-column: 1 / -1; justify-items: start; }
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--s-4); margin: 0 0 var(--s-6); }

.fact { margin: 0; padding: var(--s-4) var(--s-5); border-left: 2px solid var(--brass-line); }
.fact dt { color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.fact dd { margin: 4px 0 0; color: var(--ink); font-size: var(--step-1); font-weight: 600; letter-spacing: -.01em; }
.fact__cmp { display: block; margin-top: 2px; color: var(--muted); font-size: var(--step--2); font-weight: 500; letter-spacing: 0; }

.neighbors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }

.neighbor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--s-3);
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.neighbor:hover { border-color: var(--brass-line); transform: translateY(-1px); color: var(--ink); }
.neighbor__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neighbor__meta { grid-column: 1; color: var(--muted); font-size: var(--step--2); }
.neighbor__score { grid-row: 1 / span 2; grid-column: 2; font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; }

/* FAQ */
.faq { display: grid; gap: var(--s-2); max-width: 880px; }

.faq details {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 16px 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brass); font-size: 1.3em; font-weight: 400; line-height: 1; transition: transform var(--t) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq h3 { margin: 0; font-family: var(--font-text); font-size: var(--step-0); font-weight: 600; }
.faq__answer { padding: 0 20px 18px; color: var(--ink-2); }
.faq__answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Finder
   ========================================================================== */

.finder { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }

.finder__controls { position: sticky; top: 88px; }

@media (max-width: 960px) {
    .finder { grid-template-columns: 1fr; }
    .finder__controls { position: static; }
}

.weight { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.weight:last-child { border-bottom: 0; }
.weight__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--step--1); font-weight: 600; }
.weight__head span { display: inline-flex; align-items: center; gap: 8px; }
.weight__head output { color: var(--muted); font-size: var(--step--2); font-weight: 600; }

.range {
    width: 100%;
    height: 22px;
    margin: 0;
    background: transparent;
    accent-color: var(--accent);
    cursor: pointer;
}

.field { display: grid; gap: 6px; margin-bottom: var(--s-4); }
.field label { color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.select, .input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--step--1);
}

/* ==========================================================================
   Misc
   ========================================================================== */

.empty {
    padding: var(--s-7) var(--s-5);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    color: var(--muted);
    text-align: center;
}

.empty__title { margin: 0 0 var(--s-2); color: var(--ink); font-family: var(--font-display); font-size: var(--step-2); }

.callout {
    padding: var(--s-5);
    border: 1px solid var(--brass-line);
    border-radius: var(--r-lg);
    background: var(--brass-soft);
    color: var(--ink-2);
}

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

.attribution { color: var(--muted); font-size: var(--step--2); }
.attribution a { color: inherit; }

.letters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.letters a { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; }
.letters a:hover { border-color: var(--brass-line); }

.columns { columns: 4 220px; column-gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.columns li { break-inside: avoid; margin: 0 0 6px; }

@media print {
    .site-header, .site-footer, .tabs, .menu, .search, .theme-toggle { display: none !important; }
    body { background: #fff; color: #000; }
    .panel, .card { box-shadow: none; }
}

@media (forced-colors: active) {
    .meter__fill, .bar-cell__fill { background: CanvasText; }
    .chart .c-line { stroke: CanvasText; }
}

/* ==========================================================================
   Rankings
   ========================================================================== */

.rank-mini { display: grid; gap: 8px; margin: var(--s-3) 0 0; padding: 0 0 0 1.4em; font-size: var(--step--1); }
.rank-mini li::marker { color: var(--brass); font-weight: 700; }
.rank-mini a { color: var(--ink); font-weight: 600; text-decoration: none; }
.rank-mini a:hover { color: var(--accent); }
.rank-mini strong { float: right; font-variant-numeric: tabular-nums; }

/* finder results */
.finder-results { display: grid; gap: 6px; margin: var(--s-4) 0 0; padding: 0; list-style: none; }

.finder-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "pos name score" "pos meta score";
    align-items: center;
    gap: 0 14px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}

.finder-result .rank-pos { grid-area: pos; }
.finder-result__name { grid-area: name; color: var(--ink); font-weight: 650; text-decoration: none; }
.finder-result__name:hover { color: var(--accent); text-decoration: underline; }
.finder-result__meta { grid-area: meta; color: var(--muted); font-size: var(--step--2); }
.finder-result__score { grid-area: score; color: var(--ink); font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; }

/* region cards: long one-word names ("Královéhradecký", "Moravskoslezský") must fit narrow columns */
.card--region .card__title { font-size: var(--step-1); overflow-wrap: break-word; hyphens: auto; }

/* ==========================================================================
   Cookie consent (templates/consent/*, public/js/consent.js) and the privacy page
   ========================================================================== */

/* banner: visible only while html.consent-pending (set before first paint by the head script); fixed, so it never
   shifts the page; scroll-padding keeps focused controls above it (WCAG 2.4.11) */
.consent { display: none; }

.consent-pending .consent {
    display: block;
    position: fixed;
    z-index: 70;
    left: var(--s-3);
    right: var(--s-3);
    bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    max-width: 1080px;
    max-height: calc(100vh - 2 * var(--s-3));
    margin-inline: auto;
    padding: var(--s-4) var(--s-5);
    overflow-y: auto;
    border: 1px solid var(--brass-line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.consent__inner { display: grid; gap: var(--s-3) var(--s-5); align-items: center; }
@media (min-width: 900px) { .consent__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.consent__title { margin: 0 0 4px; font: 600 var(--step-0)/1.3 var(--font-text); letter-spacing: 0; }
.consent__text { margin: 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }
.consent__text a { color: var(--ink); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* accept and reject: one look, equally prominent */
.consent__choice { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink); }
.consent__choice:hover { border-color: var(--brass-line); background: var(--surface-2); color: var(--ink); }
.consent__actions .btn { flex: 1 1 8.5em; }
@media (min-width: 900px) { .consent__actions .btn { flex: 0 0 auto; } }
html.consent-pending { scroll-padding-bottom: calc(var(--consent-h, 160px) + var(--s-5)); }
.consent-pending body { padding-bottom: calc(var(--consent-h, 160px) + var(--s-5)); }

.consent-dialog {
    width: min(600px, calc(100% - 2 * var(--s-4)));
    max-height: calc(100vh - 2 * var(--s-4));
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.consent-dialog::backdrop { background: rgb(8 12 10 / .55); }
.consent-dialog__body { position: relative; display: grid; gap: var(--s-4); margin: 0; padding: var(--s-5); }
.consent-dialog__title { margin: 0; padding-right: 52px; font: 500 var(--step-2)/1.15 var(--font-display); }
.consent-dialog__intro { margin: 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; }
.consent-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.consent-dialog__actions .btn { flex: 1 1 10em; }
.consent-dialog__more { margin: 0; font-size: var(--step--1); }

.consent-dialog__close {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
}

.consent-dialog__close:hover { border-color: var(--brass-line); }
.consent-cats { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.consent-cat { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.consent-cat__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 44px; }
.consent-cat__name { margin: 0; font-family: var(--font-text); font-size: var(--step-0); font-weight: 600; }
.consent-cat__always { color: var(--brass); font-size: var(--step--1); font-weight: 600; }
.consent-cat__switch { display: flex; }
.consent-cat__text { margin: 4px 0 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }

.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: relative; flex: none; width: 50px; height: 30px; border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--surface); transition: background-color var(--t-fast), border-color var(--t-fast); }
.switch__thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease), background-color var(--t-fast); }
.switch input:checked + .switch__track { border-color: var(--accent); background: var(--accent-soft); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(20px); background: var(--accent); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--brass); outline-offset: 3px; }

.link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
    text-underline-offset: .2em;
    cursor: pointer;
}

.link-btn:hover { color: var(--ink); }
html:not(.js) .site-footer__consent, html:not(.js) .privacy-consent__action { display: none; }

/* /ochrana-soukromi */
.privacy__updated { margin: var(--s-3) 0 0; color: var(--muted); font-size: var(--step--1); }
.privacy-consent { display: grid; gap: var(--s-3); max-width: var(--measure); margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); border: 1px solid var(--brass-line); border-radius: var(--r-lg); background: var(--surface); }
.privacy-consent__title { margin: 0; font: 600 var(--step-1)/1.25 var(--font-text); }
.privacy-consent__state, .privacy-consent__action { margin: 0; }
.privacy-table { margin: var(--s-4) 0 var(--s-6); }
.privacy-table table { min-width: 680px; }
.privacy-table th, .privacy-table td { white-space: normal; vertical-align: top; }
.privacy-table code { white-space: nowrap; }
.contact-email { font-family: var(--font-display); font-size: var(--step-3); }
.contact-email a { text-decoration: none; }

/* ==========================================================================
   Homepage picker (templates/home/_picker.html.twig, public/js/picker.js)
   ========================================================================== */

.picker {
    padding-block: var(--section);
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(900px 380px at 12% 0%, var(--accent-soft), transparent 70%),
        radial-gradient(800px 360px at 95% 100%, var(--brass-soft), transparent 70%),
        var(--bg);
}

.picker__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-6); }
.picker__head h2 { margin: 0; }
.picker__lead { max-width: 58ch; margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--step-1); }
.picker__region .select { min-width: 240px; min-height: 48px; border-radius: var(--pill); padding: 0 18px; }

.picker__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--s-3); }

.pick {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 40px 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}

.pick:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--brass-line); box-shadow: var(--shadow); }
.pick:disabled { opacity: .45; cursor: not-allowed; }

.pick__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--brass-soft);
    color: var(--brass);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.pick__text { display: grid; gap: 2px; min-width: 0; }
.pick__label { font-weight: 650; line-height: 1.2; }
.pick__hint { color: var(--muted); font-size: var(--step--2); line-height: 1.3; }

.pick__check {
    position: absolute;
    top: 50%;
    right: 12px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: transparent;
    transform: translateY(-50%);
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.pick[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.pick[aria-pressed="true"] .pick__icon { background: var(--accent); color: var(--accent-ink); }
.pick[aria-pressed="true"] .pick__check { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

.picker__status { min-height: 1.6em; margin: var(--s-5) 0 var(--s-4); color: var(--ink-2); font-size: var(--step--1); }

.picker__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); transition: opacity var(--t) var(--ease); }
.picker__results.is-updating { opacity: .55; }

@media (max-width: 1020px) {
    .picker__results { grid-template-columns: 1fr; }
}

.picker-col {
    display: flex;
    flex-direction: column;
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.picker-col__head { display: flex; align-items: center; gap: 14px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.picker-col__icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--brass-line); border-radius: 14px; color: var(--brass); }
.picker-col__title { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; }
.picker-col__text { margin: 2px 0 0; color: var(--muted); font-size: var(--step--2); }
.picker-col__more { margin-top: auto; padding-top: var(--s-4); }

.picker-list { display: grid; gap: 2px; margin: var(--s-3) 0 0; padding: 0; list-style: none; }

.picker-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas: "rank name score" "rank meta score" "rank bar bar";
    align-items: center;
    gap: 2px 12px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--line);
    animation: picker-in var(--t) var(--ease) both;
    animation-delay: var(--delay, 0ms);
}

.picker-item:last-child { border-bottom: 0; }
.picker-item__rank { grid-area: rank; align-self: start; padding-top: 1px; color: var(--brass); font-size: var(--step-0); font-weight: 700; font-variant-numeric: tabular-nums; }
.picker-item__name { grid-area: name; overflow: hidden; color: var(--ink); font-weight: 650; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.picker-item__name:hover { color: var(--accent); text-decoration: underline; }
.picker-item__meta { grid-area: meta; overflow: hidden; color: var(--muted); font-size: var(--step--2); text-overflow: ellipsis; white-space: nowrap; }
.picker-item__score { grid-area: score; color: var(--ink); font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.picker-item__score small { margin-left: 1px; color: var(--muted); font-size: .6em; font-weight: 600; }
.picker-item__bar { grid-area: bar; height: 4px; margin-top: 6px; border-radius: var(--pill); background: var(--div-mid); overflow: hidden; }
.picker-item__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--viz-1), var(--accent)); transition: width var(--t) var(--ease); }
.picker-empty { padding: var(--s-4) 0; color: var(--muted); font-size: var(--step--1); }

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

.place-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 0; }

/* PDF report call to action (detail page hero and banner) */
.place-hero__actions { align-items: center; gap: var(--s-3); container-type: inline-size; }
.place-hero__actions .pdf-banner { flex: 1 1 100%; }

/* hero variant of .pdf-banner: same look, smaller */
.pdf-banner--compact { gap: var(--s-4); padding: 16px 18px; border-radius: var(--r-lg); }
.pdf-banner--compact .pdf-banner__icon { width: 56px; height: 56px; border-radius: 16px; }
.pdf-banner--compact .pdf-banner__text { gap: 3px; }
.pdf-banner--compact .pdf-banner__title { font-size: var(--step-1); }
.pdf-banner--compact .pdf-banner__sub { font-size: var(--step--2); }
.pdf-banner--compact .pdf-banner__btn { min-height: 44px; padding: 0 18px; font-size: var(--step--1); }

@container (max-width: 560px) {
    .pdf-banner--compact { grid-template-columns: auto minmax(0, 1fr); }
    .pdf-banner--compact .pdf-banner__btn { grid-column: 1 / -1; justify-content: center; }
}

/* PDF being generated: spinner in place of the icon and a status toast */
.spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.pdf-banner.is-loading { cursor: progress; }
.pdf-banner.is-loading .pdf-banner__icon > * { display: none; }
.pdf-banner.is-loading .pdf-banner__icon::after {
    content: "";
    width: 26px;
    height: 26px;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.pdf-status {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 90;
    display: none;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
    font-size: var(--step--1);
    transform: translateX(-50%);
}

.pdf-status.is-visible { display: flex; }
.pdf-status .spinner { width: 18px; height: 18px; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .spinner, .pdf-banner.is-loading .pdf-banner__icon::after { animation-duration: 2.4s; }
}

.pdf-banner-wrap { padding-block: clamp(32px, 4vw, 64px); }

.pdf-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-5);
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid var(--brass-line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(700px 260px at 0% 0%, var(--brass-soft), transparent 70%),
        var(--surface);
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.pdf-banner:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pdf-banner__icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 20px; background: var(--accent); color: light-dark(#f1dca6, #0c3b2e); }
.pdf-banner__text { display: grid; gap: 6px; }
.pdf-banner__text .kicker { margin: 0; }
.pdf-banner__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; }
.pdf-banner__sub { color: var(--ink-2); font-size: var(--step--1); max-width: 70ch; }
.pdf-banner__btn { min-height: 52px; padding: 0 26px; font-size: var(--step-0); }

@media (max-width: 760px) {
    .pdf-banner { grid-template-columns: 1fr; text-align: left; }
}

/* ---------- pluggable page blocks (App\Place\Section) ---------- */
.place-block--wide { grid-column: 1 / -1; }

/* ---------- share buttons (templates/_share.html.twig) ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.share__label { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.share__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.share__btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--pill);
    background: var(--surface); color: var(--ink-2, var(--ink)); font: inherit; font-size: .9rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.share__btn:hover, .share__btn:focus-visible { transform: translateY(-2px); color: #fff; border-color: transparent; background: var(--brand, var(--accent)); }
.share__btn--facebook { --brand: #1877f2; }
.share__btn--x { --brand: #111; }
.share__btn--linkedin { --brand: #0a66c2; }
.share__btn--whatsapp { --brand: #1fa855; }
.share__btn--telegram { --brand: #229ed9; }
.share__btn--threads { --brand: #111; }
.share__btn--bluesky { --brand: #1185fe; }
.share__btn--pinterest { --brand: #e60023; }
.share__btn--reddit { --brand: #ff4500; }
.share__btn--email, .share__btn--copy, .share__btn--native { --brand: var(--accent); }
.share__btn--native { padding: 0 16px; }
.share__btn.is-copied { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.share__toast:not(:empty) {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap;
    padding: 4px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); font-size: .78rem; font-weight: 500;
}
.share--compact { margin-top: var(--s-4); }
.share--compact .share__label { font-size: .72rem; }
.share--compact .share__btn { min-width: 38px; height: 38px; }
.share-strip { padding: var(--s-6, 40px) 0; border-top: 1px solid var(--line); }
.share-strip .share { justify-content: center; flex-direction: column; }
.share-strip .share__list { justify-content: center; }
@media print { .share, .share-strip { display: none; } }

/* ---------- section: bydleni ---------- */
/* Bydlení: nájemné (cenová mapa MF), rekreační objekty, technická infrastruktura */
.housing-rent { font-size: var(--step--1); }
.housing-note { margin: var(--s-3) 0 0; font-size: var(--step--1); line-height: 1.5; }
.housing-note .pill { margin-right: var(--s-2); }
.housing-subtitle { margin: var(--s-5) 0 var(--s-2); color: var(--ink); font-size: var(--step-0); font-weight: 600; }
.housing-stats { display: grid; gap: var(--s-4); margin: var(--s-3) 0 0; }
.housing-stats dt { color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.housing-stats dt .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.housing-stats dd { margin: 4px 0 0; color: var(--ink); font-size: var(--step-1); font-weight: 600; }
.housing-stats dd .muted, .housing-stats__ref { font-size: var(--step--1); font-weight: 400; }
.housing-check { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.housing-check li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--step--1); }
.housing-check__label { color: var(--ink); font-weight: 600; }
.housing-check__share { margin-left: auto; font-variant-numeric: tabular-nums; }
.housing-check .is-yes svg { color: var(--good); }
.housing-check .is-no svg { color: var(--bad); }
.housing-check .is-no .housing-check__label { color: var(--muted); }

/* ---------- section: doprava-gtfs ---------- */
/* Doprava – spoje (src/Place/Section/Transit): departures on a working day. */

.transit-day__big { margin: var(--s-2) 0 var(--s-1); font-size: var(--step-0); color: var(--ink-2); }
.transit-day__big strong {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 600;
    color: var(--accent-strong);
    margin-right: var(--s-1);
}
.transit-day__rows { margin: var(--s-4) 0 var(--s-3); display: grid; gap: 0; }
.transit-day__rows > div {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
}
.transit-day__rows > div:last-child { border-bottom: 0; }
.transit-day__rows dt { color: var(--ink-2); }
.transit-day__rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- section: dojizdka ---------- */
/* Dojížďka (src/Place/Section/Commuting): flows map and lists, stop accessibility, job centre. */

.commute-flows {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-5) var(--s-6);
    margin-top: var(--s-4);
    align-items: start;
}
@media (max-width: 1080px) {
    .commute-flows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .commute-map { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .commute-flows { grid-template-columns: minmax(0, 1fr); }
}

.commute-map { margin: 0; }
.commute-map__svg { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--surface); }
.commute-map figcaption { margin-top: var(--s-2); font-size: var(--step--2); }
.commute-map .cm-district { fill: var(--surface-2); stroke: var(--line-strong); }
.commute-map .cm-home-area { fill: var(--accent-soft); stroke: var(--accent); }
.commute-map .cm-flow { stroke: var(--viz-1); stroke-opacity: .7; fill: none; stroke-linecap: round; }
.commute-map .cm-arrow { fill: var(--viz-1); }
.commute-map .cm-dest { fill: var(--brass); stroke: var(--surface); }
.commute-map .cm-home { fill: var(--accent); stroke: var(--surface); }
.commute-map .cm-label { fill: var(--ink); stroke: var(--surface); paint-order: stroke; stroke-linejoin: round; font-family: var(--font-text); font-weight: 500; }

.commute-flows__title {
    margin: 0 0 var(--s-2);
    font-family: var(--font-text);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-2);
}
.commute-list { list-style: none; margin: 0; padding: 0; counter-reset: commute; }
.commute-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--step--1);
}
.commute-list__item:last-child { border-bottom: 0; }
.commute-list__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commute-list__name a { color: var(--ink); text-decoration: none; }
.commute-list__name a:hover { color: var(--accent); text-decoration: underline; }
.commute-list__value { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.commute-list__bar {
    display: block;
    grid-column: 1 / -1;
    height: 6px;
    border-radius: var(--pill);
    background: var(--viz-grid);
    overflow: hidden;
}
.commute-list__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--viz-1); }

.commute-stops__big { margin: var(--s-3) 0 var(--s-2); color: var(--muted); }
.commute-stops__big strong {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
    margin-right: var(--s-1);
}
.commute-stops__bar { height: 8px; margin-bottom: var(--s-3); }
.commute-stops p { font-size: var(--step--1); }

.commute-centre__sentence { margin: var(--s-3) 0; font-size: var(--step-0); color: var(--ink); }
.commute-centre { margin: 0 0 var(--s-3); }
.commute-centre__row { padding: var(--s-2) 0; }
.commute-centre__row dt { font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--s-1); }
.commute-centre__row dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 5ch; gap: var(--s-3); align-items: center; }
.commute-centre__row dd .commute-list__bar { height: 10px; }
.commute-centre__row--out .commute-list__bar > span { background: var(--viz-2); }

/* ---------- section: rizika-geo ---------- */
/* Rizika – geodata: záplavy, radon, poddolování, sesuvy (blocks hazard-*) */
.hz-flag { margin: var(--s-3) 0 0; }
.hz-table { width: 100%; margin: var(--s-4) 0 var(--s-3); border-collapse: collapse; font-size: var(--step--1); }
.hz-table th,
.hz-table td { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hz-table tr:last-child th,
.hz-table tr:last-child td { border-bottom: 0; }
.hz-table th { color: var(--ink); font-weight: 500; }
.hz-table td { padding-left: var(--s-3); color: var(--muted); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.hz-table__share { color: var(--ink) !important; font-weight: 600; }
.hz-table__hint { display: block; color: var(--muted); font-size: var(--step--2); font-weight: 400; }
.hz-lead { margin: var(--s-3) 0; color: var(--ink); font-size: var(--step--1); }
.hz-note { margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--step--2); }
.hz-group { margin: var(--s-4) 0 var(--s-2); color: var(--brass); font-size: var(--step--2); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hz-list { list-style: none; margin: 0; padding: 0; }
.hz-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.hz-list li:last-child { border-bottom: 0; }
.hz-list__name { display: block; color: var(--ink); }
.hz-list__meta { display: block; color: var(--muted); font-size: var(--step--2); }

/* ---------- section: rizika-registry ---------- */
/* Rizika – registry: IRZ provozovny, imisní limity, chráněná území */
.reg-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.reg-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-1) var(--s-4);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--step--1);
}
.reg-list li:last-child { border-bottom: 0; }
.reg-list__main { flex: 1 1 14em; min-width: 0; }
.reg-list__name { display: block; color: var(--ink); }
.reg-list__meta { display: block; color: var(--muted); font-size: var(--step--2); }
.reg-list__dist { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.reg-group { margin: var(--s-4) 0 var(--s-2); color: var(--brass); font-size: var(--step--2); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.reg-group:first-of-type { margin-top: 0; }
.reg-flag { margin: 0 0 var(--s-3); }

/* ---------- section: spolecnost ---------- */
/* Společnost: stěhování, cizinci, firmy, cestovní ruch, příčiny úmrtí */
.society-lead { margin: var(--s-3) 0 var(--s-2); font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.society-meta, .society-note { margin: 0 0 var(--s-3); font-size: var(--step--1); color: var(--muted); }
.society-note { margin-top: var(--s-4); font-size: var(--step--2); }
.society-badge { margin: 0 0 var(--s-3); font-size: var(--step--1); color: var(--muted); }
.society-list { margin: 0; }
.society-list > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-1) var(--s-4);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--step--1);
}
.society-list > div:last-child { border-bottom: 0; }
.society-list dt { color: var(--muted); }
.society-list dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- section: hospodareni ---------- */
/* Hospodaření obce a zastupitelstvo: tabulka rozpočtu po letech, složení zastupitelstva */
.finance-table__wrap { overflow-x: auto; margin-top: var(--s-4); }
.finance-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.finance-table th, .finance-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.finance-table thead th { color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .05em; }
.finance-table tbody th { color: var(--ink-2); font-weight: 500; text-align: left; }
.finance-table td { color: var(--ink); }
.finance-table .is-neg { color: var(--bad); }
.finance-table__row--fin_capex th { padding-left: var(--s-5); color: var(--muted); }
.finance-table tbody tr:last-child th, .finance-table tbody tr:last-child td { border-bottom: 0; }

.finance-seats { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--s-4) 0; }
.finance-seats__seat { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--viz-muted); }
.finance-parties__swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--viz-muted); }
.finance-seats__seat--0 { background: var(--viz-1); }
.finance-seats__seat--1 { background: var(--viz-2); }
.finance-seats__seat--2 { background: var(--viz-3); }
.finance-seats__seat--3 { background: var(--viz-4); }
.finance-seats__seat--4 { background: var(--viz-5); }
.finance-seats__seat--5 { background: var(--viz-6); }

.finance-parties { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.finance-parties li {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: baseline;
    gap: var(--s-1) var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--step--1);
}
.finance-parties li:last-child { border-bottom: 0; }
.finance-parties__name { color: var(--ink); }
.finance-parties__seats { color: var(--ink); font-weight: 600; white-space: nowrap; }
.finance-parties__share { font-variant-numeric: tabular-nums; white-space: nowrap; }

.finance-council__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--s-3); margin: 0; }
.finance-council__facts div { padding-left: var(--s-3); border-left: 2px solid var(--line-strong); }
.finance-council__facts dt { color: var(--muted); font-size: var(--step--2); }
.finance-council__facts dd { margin: 2px 0 0; color: var(--ink); font-weight: 600; }

/* ---------- section: skoly-zdravi ---------- */
/* Školy, zdraví, místa: seznamy nejbližších míst s mapkou okolí */
.amenity-places { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 760px) { .amenity-places:has(.amenity-places__map) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.amenity-group { margin: 0 0 var(--s-4); }
.amenity-group__title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1); font-family: var(--font-text); font-size: var(--step--1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.amenity-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.amenity-list { list-style: none; margin: 0; padding: 0; }
.amenity-list li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.amenity-list li:last-child { border-bottom: 0; }
.amenity-list__name { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.amenity-list__dist { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.amenity-places__map { margin: 0; color: var(--ink); }
.amenity-places__map svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius, 8px); }
.amenity-places__map figcaption { margin-top: var(--s-2); font-size: var(--step--2); }
.amenity-verdict { margin: 0 0 var(--s-3); }
.amenity-kindergarten__ratio { margin: 0 0 var(--s-2); font-size: var(--step-0); }

/* ---------- section: kultura ---------- */
/* Kultura, sport a volný čas: seznamy památek, koupání a zázemí obce */
.leisure-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.leisure-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.leisure-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-1) var(--s-4);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--step--1);
}
.leisure-list li:last-child { border-bottom: 0; }
.leisure-list__name { color: var(--ink); }
.leisure-list__name a { color: inherit; text-decoration-color: var(--line-strong); }
.leisure-check { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.leisure-check li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--step--1); }
.leisure-check .is-yes svg { color: var(--good); }
.leisure-check .is-no { color: var(--muted); }
.leisure-check .is-no svg { color: var(--line-strong); }

/* ---------- section: funkce ---------- */
/* Nové funkce: podobné obce, porovnání obcí, přepínač vrstev mapy, trend klimatu. Only design tokens from app.css. */

/* ------------------------------------------------------------ podobné obce (Okolí) */
.similar { margin-top: var(--s-6); }
.similar__title { margin: 0 0 var(--s-2); font-size: var(--step-1); }
.similar__lead { margin: 0 0 var(--s-5); max-width: 70ch; color: var(--muted); font-size: var(--step--1); }
.similar__list { display: grid; gap: var(--s-2); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.similar__more { margin: var(--s-5) 0 0; }

.similar-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--s-3);
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    transition: border-color var(--t-fast) var(--ease);
}

.similar-item:hover { border-color: var(--brass-line); }
.similar-item__link { display: grid; gap: 2px; min-width: 0; color: var(--ink); text-decoration: none; }
.similar-item__link:hover .similar-item__name { color: var(--accent); }
.similar-item__name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.similar-item__meta { color: var(--muted); font-size: var(--step--2); }
.similar-item__score { grid-row: 1 / span 2; grid-column: 2; font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.similar-item__compare { grid-column: 1; justify-self: start; color: var(--muted); font-size: var(--step--2); }
.similar-item__compare:hover { color: var(--accent); }

/* ------------------------------------------------------------ porovnání obcí */
.compare-form { display: grid; gap: var(--s-4); }
.compare-form__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-4); }
.compare-form__field { position: relative; margin: 0; }
.compare-form__field .search__input { width: 100%; }
.compare-form .btn { justify-self: start; }

.compare-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); margin: var(--s-5) 0; }

.compare-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}

.compare-head:hover { border-color: var(--brass-line); color: var(--ink); }
.compare-head__arms { width: 40px; height: auto; }
.compare-head__text { display: grid; gap: 2px; min-width: 0; }
.compare-head__name { font-weight: 600; font-size: var(--step-1); }
.compare-head__meta { color: var(--muted); font-size: var(--step--2); }
.compare-head__score { font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; }

.compare-panel + .compare-panel { margin-top: var(--s-5); }
.compare-table { width: 100%; min-width: 560px; table-layout: fixed; }
.compare-table th:first-child { width: 34%; }
.compare-table th[scope="row"] { font-weight: 500; text-align: left; }
.compare-table thead th:not(:first-child) { min-width: 150px; }
.compare-table__icon { display: inline-flex; margin-right: var(--s-2); color: var(--muted); vertical-align: -3px; }
.compare-table__total th, .compare-table__total .bar-cell__value { font-weight: 700; }
.compare-cell .bar-cell__fill { background: var(--viz-muted); }
.compare-cell.is-best { background: var(--accent-soft); }
.compare-cell.is-best .bar-cell__fill { background: var(--accent); }
.compare-cell.is-best .bar-cell__value { color: var(--ink); font-weight: 700; }
.compare-cell__note { display: block; color: var(--muted); font-size: var(--step--2); }

/* ------------------------------------------------------------ přepínač vrstev mapy */
/* one row per topic: the label in a fixed column, its layers flowing next to it */
.map-layers { display: grid; margin-top: var(--s-5); border-top: 1px solid var(--line); }
.map-layers__group { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; gap: var(--s-2) var(--s-4); margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.map-layers__title { margin: 0; color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.map-layers .chips { gap: 6px; margin: 0; }
.map-layers .chip { min-height: 30px; max-width: 100%; padding: 0 12px; font-size: var(--step--2); }

@media (max-width: 760px) {
    .map-layers__group { grid-template-columns: minmax(0, 1fr); }
    .map-layers .chip { white-space: normal; text-align: left; }
}

/* ------------------------------------------------------------ trend klimatu */
.climate-trend { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.climate-trend th, .climate-trend td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.climate-trend th:first-child, .climate-trend td:first-child { text-align: left; }
.climate-trend thead th { color: var(--muted); font-size: var(--step--2); font-weight: 600; }
.climate-trend__change { font-weight: 700; white-space: nowrap; }
.climate-trend__change--up { color: var(--div-neg-3); }
.climate-trend__change--down { color: var(--div-pos-3); }
.climate-trend__note { margin: var(--s-3) 0 0; color: var(--muted); font-size: var(--step--2); }

/* nearest motorway exit (templates/place/blocks/transport-motorway.html.twig) */
.motorway__headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: var(--s-3) 0; font-size: var(--step-1); }
.motorway__dist { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

/* motorway map (App\Place\Section\Amenity\MotorwayMap) */
.motorway-map { margin: 0 0 var(--s-3); }
.motorway-map__svg { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--surface); }
.motorway-map figcaption { margin-top: var(--s-2); font-size: var(--step--2); }
.motorway-map .mw-bg { fill: var(--surface-2); }
.motorway-map .mw-area { fill: var(--surface-2); stroke: var(--line); }
.motorway-map .mw-district { fill: none; stroke: var(--line-strong); }
.motorway-map .mw-home-area { fill: var(--accent-soft); stroke: var(--accent); }
.motorway-map .mw-road-casing { stroke: var(--surface); }
.motorway-map .mw-road { stroke: #c0392b; }
.motorway-map .mw-ref { fill: #c0392b; }
.motorway-map .mw-ref-text { fill: #fff; font-family: var(--font-text); font-weight: 700; }
.motorway-map .mw-junction { fill: var(--surface); stroke: #7a1f16; stroke-width: .6; }
.motorway-map .mw-route { stroke: var(--accent); fill: none; stroke-linecap: round; }
.motorway-map .mw-exit { fill: var(--brass); stroke: var(--surface); }
.motorway-map .mw-exit-num { fill: #fff; font-family: var(--font-text); font-weight: 700; }
.motorway-map .mw-home { fill: var(--accent); stroke: var(--surface); }
.motorway-map .mw-label { fill: var(--ink); stroke: var(--surface); paint-order: stroke; stroke-linejoin: round; font-family: var(--font-text); font-weight: 500; }
.motorway-map .mw-scale { stroke: var(--ink); fill: none; }
.motorway__list { margin: 0; padding: 0; list-style: none; }
.motorway__list li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-size: var(--step--1); border-bottom: 1px solid var(--line); }
.motorway__list li:last-child { border-bottom: 0; }
.motorway__list .amenity-list__dist { margin-left: auto; color: var(--muted); }
.motorway__num { display: inline-grid; flex-shrink: 0; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brass); color: #fff; font-size: 12px; font-weight: 700; }

/* curiosities: homepage widget (templates/home/_curiosities.html.twig) and /zajimavosti */
.curio-widget {
    position: relative;
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid var(--brass-line);
    border-radius: var(--r-xl);
    background: radial-gradient(600px 240px at 100% 0%, var(--brass-soft), transparent 70%), var(--surface);
    box-shadow: var(--shadow);
}
.curio-widget__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.curio-widget__head .kicker { margin: 0; }
.curio-widget__controls { display: flex; align-items: center; gap: var(--s-2); }
.curio-widget__controls .icon-btn { font-size: 1.3rem; line-height: 1; }
.curio-widget__count { min-width: 4.5em; color: var(--muted); font-size: var(--step--2); font-variant-numeric: tabular-nums; text-align: center; }
.curio-widget__list { margin: 0; padding: 0; list-style: none; }
.curio-slide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; min-height: 7.5em; }
.curio-slide[hidden] { display: none; }
.curio-slide.is-active { animation: curio-in .45s var(--ease); }
.curio-slide__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent); color: light-dark(#f1dca6, #0c3b2e); }
.curio-slide__title { margin: 0 0 4px; color: var(--brass); font-size: var(--step--1); font-weight: 600; }
.curio-slide__text { max-width: 60ch; margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; }
.curio-link { font-size: var(--step--1); font-weight: 600; }
.curio-widget__all { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); font-size: var(--step--1); font-weight: 600; }
@keyframes curio-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .curio-slide.is-active { animation: none; } }
@media (max-width: 520px) {
    .curio-slide { grid-template-columns: 1fr; }
    .curio-slide__text { font-size: var(--step-1); }
}

.curio-group h2 { margin-bottom: var(--s-4); }
.curio-card { display: flex; flex-direction: column; gap: var(--s-2); }
.curio-card .card__kicker { display: flex; align-items: center; gap: 8px; }
.curio-card__icon { display: inline-grid; place-items: center; color: var(--accent); }
.curio-card__lead { margin: 0; font-size: var(--step-0); line-height: 1.45; }
.curio-card__more { margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--step--1); }
.curio-card__more summary { color: var(--muted); cursor: pointer; }
.curio-card__more ul { margin: var(--s-2) 0 0; padding-left: 1.1em; color: var(--ink-2); }
.curio-card__more li + li { margin-top: 6px; }
.page-head .chips { margin-top: var(--s-4); }

.curio-slide__text a, .curio-card__detail { color: inherit; text-decoration: none; }
.curio-slide__text a:hover, .curio-card__detail:hover { color: var(--accent); }
.curio-card--link { color: var(--ink); text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t) var(--ease); }
.curio-card--link:hover { border-color: var(--brass-line); transform: translateY(-2px); }

/* curiosity detail (templates/curiosity/show.html.twig) */
.curio-story {
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid var(--brass-line);
    border-radius: var(--r-xl);
    background: radial-gradient(600px 240px at 100% 0%, var(--brass-soft), transparent 70%), var(--surface);
    box-shadow: var(--shadow);
}
.curio-story__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.curio-story__title { margin: 0; font-size: var(--step-3); }
.curio-story__text { margin: 0 0 var(--s-5); font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; }
.curio-story__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.curio-story__more-h { margin-top: var(--s-7, 48px); font-size: var(--step-1); }
.curio-others { margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.curio-others li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.curio-others a { color: var(--ink-2); text-decoration: none; }
.curio-others a:hover { color: var(--accent); }

/* planned and under-construction transport (App\Place\Section\Amenity\PlannedTransport, MotorwayMap) */
.motorway-map .mw-road-construction { stroke: #c0392b; }
.motorway-map .mw-road-proposed { stroke: #d98b82; }
.motorway-map .mw-rail-construction { stroke: light-dark(#44505a, #aab4bc); }
.motorway-map .mw-rail-proposed { stroke: light-dark(#8a949c, #7b858d); }
.mw-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: var(--s-2) 0 0; padding: 0; list-style: none; font-size: var(--step--2); }
.mw-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mw-legend line { fill: none; stroke-width: 3; }
.mw-legend__road-construction { stroke: #c0392b; stroke-dasharray: 7 4; }
.mw-legend__road-proposed { stroke: #d98b82; stroke-dasharray: 1.5 4.5; stroke-linecap: round; }
.mw-legend__rail-construction { stroke: light-dark(#44505a, #aab4bc); stroke-dasharray: 8 3.5 2 3.5; }
.mw-legend__rail-proposed { stroke: light-dark(#8a949c, #7b858d); stroke-dasharray: 1.5 4.5; stroke-linecap: round; }
.motorway__planned { margin: var(--s-3) 0 0; padding: 0; list-style: none; font-size: var(--step--1); }
.motorway__planned li { padding: 6px 0; border-top: 1px solid var(--line); }
.motorway__note { margin: var(--s-2) 0 0; font-size: var(--step--2); }

/* ==========================================================================
   Favourites, personal index (public/js/personal.js) and the badge builder on /pro-obce (public/js/badge.js)
   ========================================================================== */

.fav-indicator[hidden], .fav-toggle[hidden], .fav-mini[hidden], .index-personal[hidden],
.badge-builder [hidden], [data-badge-pdf][hidden], .favorites [hidden] { display: none; }
.fav-indicator { position: relative; color: var(--bad); text-decoration: none; }
.fav-indicator:hover { color: var(--bad); }
.fav-indicator__count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.fav-toggle svg, .fav-mini svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill var(--t-fast) var(--ease); }
.fav-toggle[aria-pressed="true"] { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.fav-toggle[aria-pressed="true"] svg, .fav-mini[aria-pressed="true"] svg { fill: var(--bad); stroke: var(--bad); }

.neighbors__item { position: relative; }
.neighbors__item:has(.fav-mini:not([hidden])) .neighbor { padding-right: 52px; }
.fav-mini {
    position: absolute;
    top: 50%;
    right: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--pill);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transform: translateY(-50%);
}
.fav-mini:hover, .fav-mini:focus-visible { background: var(--surface-2); color: var(--bad); }

.place-hero__badge { margin: var(--s-3) 0 0; font-size: var(--step--1); }
.place-hero__badge a { color: var(--muted); }
.place-hero__badge a:hover { color: var(--accent); }

.index-personal {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px var(--s-3);
    align-items: baseline;
    margin: var(--s-2) 0 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--brass-line);
    border-radius: var(--r);
    background: var(--brass-soft);
}
.index-personal__label { color: var(--brass); font-size: var(--step--2); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.index-personal__value { display: flex; grid-row: 1 / span 2; grid-column: 2; align-items: baseline; justify-self: end; font-size: var(--step-3); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.index-personal__value .index__max { font-size: .4em; margin-left: 4px; }
.index-personal__note { grid-column: 1; color: var(--muted); font-size: var(--step--2); line-height: 1.4; }

.favorites__form { display: grid; gap: var(--s-5); }
.favorites__fieldset { margin: 0; padding: 0; border: 0; }
.favorites__list { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.favorites__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: center;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}
.favorites__pick { display: grid; place-items: center; }
.favorites__pick input { width: 20px; height: 20px; accent-color: var(--accent); }
.favorites__name { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.favorites__remove { width: 34px; height: 34px; }
.favorites__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.favorites__actions .note { margin: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.badge-builder__form { margin-bottom: var(--s-5); }
.badge-builder__format { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; border: 0; }
.badge-builder__format legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.badge-builder__format label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--step--1); }
.badge-builder__format input { accent-color: var(--accent); }
.badge-builder__status { margin: 0 0 var(--s-4); }
.badge-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--s-4); }
.badge-variant { display: grid; gap: var(--s-3); align-content: start; }
.badge-variant__title { margin: 0; font-size: var(--step-1); }
.badge-variant__preview {
    display: grid;
    place-items: center;
    min-height: 150px;
    padding: var(--s-4);
    border-radius: var(--r);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--line);
}
.badge-variant__preview--tmavy { background: #f3eee3; }
.badge-variant__preview img { max-width: 100%; height: auto; }
.badge-variant__code {
    width: 100%;
    min-height: 7.5em;
    padding: 10px 12px;
    font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    resize: vertical;
    word-break: break-all;
}
.badge-variant__copy { justify-self: start; }

/* ---- School results (CERMAT) block, templates/place/blocks/education-school-results.html.twig ---- */
.school-results td:first-child { min-width: 14em; }

/* index over the years (templates/place/blocks/history-index.html.twig) */
.history-index__sentence { margin: var(--s-2) 0 var(--s-3); font-size: var(--step-0); }
.history-index { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.history-index th, .history-index td { padding: 6px; border-bottom: 1px solid var(--line); text-align: right; }
.history-index th:first-child { text-align: left; font-weight: 400; }
.history-index thead th { color: var(--muted); font-size: var(--step--2); font-weight: 600; }
.history-index__total th, .history-index__total td { font-weight: 700; }
.history-index__change { font-weight: 700; white-space: nowrap; }
.history-index__change--up { color: var(--good); }
.history-index__change--down { color: var(--bad); }
.history-index__note { margin: var(--s-3) 0 0; color: var(--muted); font-size: var(--step--2); }
.index__trend { margin: 4px 0 0; font-size: var(--step--1); color: var(--muted); }
.index__trend a { color: inherit; }
.index__trend-change { font-weight: 700; font-variant-numeric: tabular-nums; }
.index__trend-change.is-up { color: var(--good); }
.index__trend-change.is-down { color: var(--bad); }

/* ---- Commute search /kde-bydlet (templates/commute/index.html.twig, public/js/commute.js) ---- */
.commute__results { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.commute__results > .note, .commute__results > .callout { margin: 0; }
.commute__results .finder-results { margin: 0; }
.commute__modes { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-3) 0 var(--s-4); padding: 0; border: 0; }
.commute__modes legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.commute__mode { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--surface); font-size: var(--step--1); cursor: pointer; }
.commute__mode:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, var(--surface-2)); color: var(--ink); font-weight: 600; }
.commute__mode input { margin: 0; accent-color: var(--accent); }
.commute__map { margin: 0; padding: var(--s-3); }
.commute__map svg { max-height: 560px; }
.commute__map .m-focus { fill: var(--brass); }
.commute__map figcaption { margin: var(--s-2) 0 0; }
.commute__method { margin-top: var(--s-2); }
.commute__method p { margin: 0 0 var(--s-2); }
.home-commute { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.home-commute h2 { margin: 0 0 var(--s-2); }
.home-commute p { margin: 0; }

/* footer disclaimer (templates/_legal.html.twig) */
.site-footer__disclaimer { max-width: 90ch; margin: 0 0 var(--s-3); color: var(--muted); font-size: var(--step--2); line-height: 1.5; }

/* ------------------------------------------------------------ city parts (městské části, App\CityPart) */
.city-parts-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-4); }
.city-parts-block__map .map { max-width: 560px; margin-inline: auto; }
/* map above the table: next to a map the nine-column table did not fit and scrolled sideways with hidden columns */
.city-parts-block__map { width: 100%; }
.city-parts-ranking { margin-bottom: var(--s-6); align-items: start; }
.city-parts .sort {
    padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer;
    text-transform: inherit; letter-spacing: inherit;
}
.city-parts th[aria-sort] .sort::after { content: " ↑"; color: var(--accent); }
.city-parts th[aria-sort="descending"] .sort::after { content: " ↓"; }
.city-parts .sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.city-parts__cat { width: 1%; }
.score-row--city .score-row__label a, .score-row--city .score-row__value { color: var(--muted); }
.score-row__note { color: var(--muted); font-size: var(--step--2); font-weight: 400; }
.topic__score--city { color: var(--muted); }
.fact--city dd { color: var(--muted); }
.city-parts th, .city-parts td { padding: 8px 10px; }
@media (max-width: 1380px) { .city-parts th, .city-parts td { padding-inline: 7px; } }
/* phones: the table scrolls sideways; the name column stays in view and a shadow shows there is more to the right */
@media (max-width: 760px) {
    .city-parts th, .city-parts td { padding: 8px 6px; }
    .city-parts th:nth-child(2), .city-parts td:nth-child(2) { position: sticky; left: 0; z-index: 1; min-width: 110px; max-width: 150px; background: var(--surface); box-shadow: 6px 0 6px -6px rgb(0 0 0 / .25); }
    .city-parts tr.is-self td:nth-child(2) { background: var(--accent-soft); }
    .table-wrap:has(.city-parts) {
        background:
            linear-gradient(to left, var(--surface) 30%, transparent) right center / 24px 100% no-repeat local,
            radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .18), transparent) right center / 12px 100% no-repeat scroll;
    }
}

/* /kde-bydlet: centre suggestions and the big cities */
.commute__centre { position: relative; }
.commute__centre .suggest { min-width: 0; }
.commute__cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.commute__cities .chip { display: flex; justify-content: center; width: 100%; }

/* /najit-misto: profiles, map by priorities and profile landing pages (finder-map.js, finder.js, profile.js) */
.finder-profiles { margin-bottom: var(--s-5); }
.finder-profiles__title { margin: 0 0 var(--s-2); color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.finder-profiles .chip { cursor: pointer; font-family: inherit; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.finder-profiles__link { display: inline-block; margin-top: var(--s-2); font-size: var(--step--1); font-weight: 600; }
.finder-profile-links { margin-top: var(--s-6); }
.finder-profile-links ul, .profile-page ul.chips { margin: 0; padding: 0; list-style: none; }

.finder-map { margin: 0 0 var(--s-4); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.finder-map__stage { position: relative; min-height: 160px; }
.finder-map__host svg { display: block; width: 100%; height: auto; max-height: 520px; }
.finder-map__host .m-area { stroke: var(--surface); stroke-width: .3; vector-effect: non-scaling-stroke; cursor: pointer; }
.finder-map__host .m-off { fill: var(--div-mid); opacity: .55; cursor: default; }
.finder-map__loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: var(--step--1); }
.finder-map.is-ready .finder-map__loading { display: none; }
.finder-map.is-failed .finder-map__loading { display: none; }
.finder-map.is-failed .finder-map__stage { min-height: 0; }
.finder-map.is-failed .finder-map__host::after { content: "Mapu se nepodařilo načíst."; color: var(--muted); font-size: var(--step--1); }
.finder-map__tip {
    position: absolute; z-index: 3; display: grid; gap: 2px; max-width: 240px; padding: 8px 12px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm, 8px); background: var(--surface); color: var(--ink);
    box-shadow: 0 6px 20px light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .5)); font-size: var(--step--1); pointer-events: none;
}
.finder-map__tip[hidden] { display: none; }
.finder-map__tip a { pointer-events: auto; font-weight: 600; }
.finder-map__tip span { color: var(--muted); font-size: var(--step--2); font-variant-numeric: tabular-nums; }
.finder-map__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: var(--s-3); color: var(--muted); font-size: var(--step--2); }
.finder-map__off { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.finder-map__swatch { width: 18px; height: 10px; border-radius: 2px; background: var(--div-mid); opacity: .55; }
.finder-map__note { margin: var(--s-2) 0 0; }

.profile-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: clamp(20px, 3vw, 44px); align-items: start; }
.profile-page__why { position: sticky; top: 88px; }
.profile-page__cta { margin: var(--s-4) 0 var(--s-5); }
.profile-page__text { margin-top: var(--s-6); }
.profile-weights { display: grid; gap: var(--s-3); margin: var(--s-3) 0; padding: 0; list-style: none; }
.profile-weights li { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 2px 12px; align-items: center; }
.profile-weights__name { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); font-weight: 600; }
.profile-weights__bar { height: 6px; border-radius: var(--pill); background: var(--div-mid); overflow: hidden; }
.profile-weights__bar span { display: block; height: 100%; border-radius: var(--pill); background: var(--accent); }
.profile-weights__why { grid-column: 1 / -1; color: var(--muted); font-size: var(--step--2); }
@media (max-width: 960px) {
    .profile-page { grid-template-columns: 1fr; }
    .profile-page__why { position: static; }
}
@media (max-width: 600px) {
    .finder-map { padding: var(--s-2); }
    .finder-map__off { margin-left: 0; }
    .finder-profiles .chips { flex-wrap: nowrap; margin-inline: calc(var(--s-4, 16px) * -1); padding: 0 var(--s-4, 16px) 6px; overflow-x: auto; scrollbar-width: thin; }
}

/* ==========================================================================
   Widget for businesses (/pro-firmy): configurator, preview, embed codes
   ========================================================================== */
.biz-builder [hidden] { display: none; }
.biz-builder__grid { display: grid; gap: var(--s-5); align-items: start; margin-bottom: var(--s-5); }
@media (min-width: 900px) { .biz-builder__grid { grid-template-columns: minmax(280px, 380px) 1fr; } }
.biz-builder__form .btn { justify-self: start; }
.biz-builder__opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin: 0; padding: 0; border: 0; }
.biz-builder__opts legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.biz-builder__opts label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--step--1); }
.biz-builder__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 0 var(--s-3); margin: 0; padding: 0; border: 0; }
.biz-builder__fields legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.biz-builder__fields label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: var(--step--1); }
.biz-builder__fields .note { grid-column: 1 / -1; }
.biz-builder__fields:disabled label { opacity: .5; }
.biz-builder__preview { min-width: 0; padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--surface-2); }
.biz-builder__status { margin: 0 0 var(--s-3); }
.biz-builder__frame { display: block; width: 100%; max-width: 700px; margin-inline: auto; border: 0; color-scheme: normal; }
.biz-builder__code-title { margin: 0 0 var(--s-2); font-size: var(--step-1); }
.biz-builder__code { width: 100%; margin: var(--s-3) 0; font: 500 .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.biz-who h3 { margin: 0 0 var(--s-2); font-size: var(--step-0); }
.biz-who p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.biz-contact { max-width: 720px; margin-inline: auto; text-align: center; }
.biz-contact h2 { margin-top: 0; }

/* ==========================================================================
   Commute tools: two workplaces (/kde-bydlet-pro-dva, templates/commute/couple.html.twig) and the housing +
   commuting calculator (/kalkulacka-bydleni, templates/commute/cost.html.twig)
   ========================================================================== */
.couple .finder__controls, .cost .finder__controls { position: static; }
.couple__person { margin: 0 0 var(--s-3); padding: 0 0 var(--s-2); border: 0; border-bottom: 1px solid var(--line); }
.couple__person legend { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-2); padding: 0; color: var(--ink); font-weight: 650; }
.couple__person .weight { border-bottom: 0; }
.couple__person .commute__modes { margin: 0 0 var(--s-2); }
.couple__badge {
    display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--brass); color: var(--surface); font-size: 12px; font-weight: 700; line-height: 1;
}
.couple__badge--2 { background: var(--accent); color: var(--accent-ink); }
.couple .finder-result { grid-template-areas: "pos name score" "pos meta score" "pos times score"; }
.couple__times { grid-area: times; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; color: var(--ink-2); font-size: var(--step--2); }
.couple__time { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.couple__time .couple__badge { width: 16px; height: 16px; font-size: 10px; }
.couple__examples { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.commute__pair-link { margin: 0; }

.cost__subtitle { margin-top: var(--s-4); }
.cost__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-3); }
.cost__grid .field { margin-bottom: var(--s-3); }
.cost__grid .field label { min-height: 2.6em; display: flex; align-items: flex-end; }
.cost__grid [hidden] { display: none; }
.cost__hint { margin: 0 0 var(--s-3); font-size: var(--step--2); }
.cost__more { margin: 0 0 var(--s-4); }
.cost__more summary { margin-bottom: var(--s-3); color: var(--accent); font-size: var(--step--1); font-weight: 600; cursor: pointer; }
.cost__reset { display: inline-block; margin-left: var(--s-3); color: var(--muted); font-size: var(--step--2); }
.cost__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); }
.cost__card { margin: 0; padding: var(--s-4); }
.cost__card p { margin: 0; }
.cost__card-label { color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cost__card-value { margin: 4px 0 !important; color: var(--ink); font-family: var(--font-display); font-size: var(--step-2); font-variant-numeric: tabular-nums; }
.cost__chart { margin: 0; padding: var(--s-4); }
.cost__chart figcaption { margin-bottom: var(--s-3); }
.cost-bars { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cost-bars__row { display: grid; grid-template-columns: minmax(90px, 11rem) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); font-size: var(--step--1); }
.cost-bars__name {
    overflow: hidden; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left;
    text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
button.cost-bars__name:hover { color: var(--accent); text-decoration: underline; }
.cost-bars__track { display: flex; height: 14px; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.cost-bars__part { display: block; height: 100%; }
.cost-bars__part--housing { background: var(--viz-1); }
.cost-bars__part--commute { background: var(--viz-2); }
.cost-bars__part--time { background: var(--viz-3); }
.cost-bars__value { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-legend { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin: var(--s-3) 0 0; color: var(--muted); font-size: var(--step--2); }
.cost-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cost-legend span[hidden] { display: none; }
.cost-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.cost__detail { margin: 0; padding: var(--s-4); color: var(--ink-2); line-height: 1.6; }
.cost__detail strong { color: var(--ink); }
.cost-table .sort {
    padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer;
    text-transform: inherit; letter-spacing: inherit;
}
.cost-table th[aria-sort] .sort::after { content: " ↑"; color: var(--accent); }
.cost-table th[aria-sort="descending"] .sort::after { content: " ↓"; }
.cost-table .sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cost-table tr.is-selected { background: var(--brass-soft); }
.cost-table td, .cost-table th { padding: 8px 10px; }
.cost__results > .btn { justify-self: start; }
.cost__ev[hidden], .cost__hint[hidden], .cost__presets[hidden] { display: none; }
.cost__label { margin: 0 0 var(--s-2); color: var(--ink); font-size: var(--step--1); font-weight: 600; }
.cost__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.cost__presets .chip { cursor: pointer; font: inherit; font-size: var(--step--2); }
.cost__charging { width: 100%; margin-bottom: var(--s-2); border-collapse: collapse; font-size: var(--step--1); }
.cost__charging th, .cost__charging td { padding: 0 6px 6px 0; text-align: left; vertical-align: middle; }
.cost__charging thead th { color: var(--muted); font-size: var(--step--2); font-weight: 600; }
.cost__charging tbody th { font-weight: 400; }
.cost__charging .input { width: 100%; min-width: 4.5em; }
.cost__method ul { margin: 0 0 var(--s-2); padding-left: 1.2em; }
.cost__method li { margin-bottom: 6px; }
@media (max-width: 600px) {
    .cost-bars__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "track track"; gap: 2px var(--s-2); }
    .cost-bars__name { grid-area: name; }
    .cost-bars__track { grid-area: track; }
    .cost-bars__value { grid-area: value; }
    .cost-table td:first-child, .cost-table th:first-child { position: sticky; left: 0; background: var(--surface); }
}

/* /kam-se-dostanu: reach map from any point (public/js/reach.js) */
.reach__place { position: relative; }
.reach__place .suggest { min-width: 0; }
.reach__geo { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; }
.reach__geo[hidden] { display: none; }
.reach__hint { margin: var(--s-2) 0 var(--s-4); }
.reach__times { margin: 0; padding: 0; border: 0; }
.reach__times legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.reach__time-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.reach__time { position: relative; cursor: pointer; }
.reach__time input { position: absolute; opacity: 0; pointer-events: none; }
.reach__time span {
    display: grid; gap: 2px; min-height: 52px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px;
    background: var(--surface); color: var(--ink); font-size: var(--step--1); line-height: 1.2;
}
.reach__time small { color: var(--muted); font-size: var(--step--2); font-variant-numeric: tabular-nums; }
.reach__time small:empty::before { content: "\00a0"; }
.reach__time:hover span { border-color: var(--brass-line); }
.reach__time input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.reach__time input:checked + span small { color: inherit; opacity: .85; }
.reach__time input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.reach__results { display: grid; gap: var(--s-4); min-width: 0; }
.reach__results > .callout { margin: 0; }
.reach__map { margin: 0; padding: var(--s-3); }
.reach__stage { position: relative; min-height: 160px; }
.reach__host svg { display: block; width: 100%; height: auto; max-height: 560px; cursor: crosshair; touch-action: manipulation; }
.reach__host .m-area { stroke: var(--surface); stroke-width: .3; transition: fill var(--t-fast) var(--ease); }
.reach__host .m-off { fill: var(--div-mid); opacity: .7; }
.reach__host .reach__pin { fill: var(--brass); stroke: var(--surface); stroke-width: 2.5; pointer-events: none; }
.reach__loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: var(--step--1); }
.reach__loading[hidden] { display: none; }
.reach__busy { position: absolute; top: 50%; left: 50%; z-index: 2; will-change: transform; display: flex; align-items: center; gap: var(--s-2); max-width: calc(100% - 32px); margin: 0; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-2, 0 4px 16px rgb(0 0 0 / .12)); color: var(--ink); font-size: var(--step--1); transform: translate(-50%, -50%); pointer-events: none; }
.reach__busy[hidden] { display: none; }
.reach__busy .spinner { width: 18px; height: 18px; border-width: 2.5px; color: var(--accent); }
.reach__zoom { position: absolute; top: 8px; right: 8px; min-height: 32px; cursor: pointer; font-family: inherit; font-size: var(--step--2); }
.reach__zoom[hidden] { display: none; }
.reach__veil { position: absolute; inset: 0; z-index: 1; margin: 0; will-change: opacity; background: color-mix(in srgb, var(--surface) 45%, transparent); pointer-events: none; }
.reach__veil[hidden] { display: none; }
.reach__output.is-loading .reach__summary::after { content: " Počítám…"; color: var(--muted); }
.reach__summary { margin: 0; color: var(--ink-2); }
.reach__summary strong { display: block; margin-bottom: 4px; color: var(--ink); font-family: var(--font-display, inherit); font-size: var(--step-1); line-height: 1.3; }
.reach__nearest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: var(--s-4) 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--line); }
.reach__near { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--s-4); background: var(--surface); }
.reach__near dt { color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.reach__near dd { margin: 0; }
.reach__near-time { color: var(--ink); font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.reach__near-name { color: var(--ink-2); font-size: var(--step--1); overflow-wrap: anywhere; }
.reach__method { margin-top: var(--s-2); }
.reach__unavailable p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
    .reach__nearest { grid-template-columns: 1fr; }
    .reach__near { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label time" "name time"; align-items: center; }
    .reach__near dt { grid-area: label; }
    .reach__near-time { grid-area: time; font-size: var(--step-1); }
    .reach__near-name { grid-area: name; }
    .reach__time-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Address check (/proverit-adresu) – templates/address_check/*, public/js/address-check.js
   ========================================================================== */
.addr-form { display: grid; gap: var(--s-2); }
.addr-form__label { color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.addr-form__row { display: flex; gap: var(--s-3); align-items: stretch; }
.addr-form__field { position: relative; flex: 1; min-width: 0; }
.addr-form__input { min-height: 52px; font-size: var(--step-0); }
.addr-form .btn { flex: none; min-height: 52px; }
.addr-form__help { margin: 0; }
.addr-form .suggest { min-width: 0; }
.suggest__empty { padding: 9px 12px; color: var(--muted); font-size: var(--step--1); }
.addr-results { margin-top: var(--s-5); }
.addr-results__title { margin: 0 0 var(--s-3); font-size: var(--step-1); }
.addr-results__list { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.addr-results__list a { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.addr-results__list a:hover { border-color: var(--brass-line); }
.addr-results__list span { color: var(--muted); font-size: var(--step--1); }
.addr-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-3); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.addr-topics li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.addr-topics .icon { flex: none; color: var(--accent); }
.addr-topics div { display: grid; gap: 2px; }
.addr-topics span { color: var(--muted); font-size: var(--step--1); }
.addr-legal { margin: var(--s-6) 0 var(--s-4); font-size: var(--step--1); }
.addr-legal p:last-child { margin-bottom: 0; }
.addr-sources { margin: 0 0 var(--s-5); color: var(--ink-2); font-size: var(--step--1); }
.addr-sources summary { cursor: pointer; font-weight: 600; }
.addr-sources ul { display: grid; gap: var(--s-2); margin: var(--s-3) 0; padding-left: 1.2em; }
.addr-head__links { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.addr-page { padding-top: 0; }
.addr-head__links .chip { display: inline-flex; gap: 6px; align-items: center; }
.addr-print { font: inherit; cursor: pointer; }
.addr-print[hidden] { display: none; }
.addr-summary { margin-bottom: var(--s-5); }
.addr-summary--alert { border-color: var(--brass-line); }
.addr-summary__list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.addr-summary__list a { color: var(--bad); font-weight: 600; }
.addr-summary__legal { margin: 0; }
.addr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.addr-block { min-width: 0; }
.addr-block--wide { grid-column: 1 / -1; }
.addr-block__title { display: flex; gap: var(--s-2); align-items: center; margin: 0 0 var(--s-4); font-size: var(--step-2); }
.addr-block__title .icon { flex: none; color: var(--accent); }
.addr-block__sub { margin: var(--s-5) 0 var(--s-3); font-size: var(--step-1); }
.addr-checks { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.addr-check { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3) 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.addr-check:first-child { border-top: 0; padding-top: 0; }
.addr-check .pill { justify-self: start; white-space: nowrap; }
.addr-check div { display: grid; gap: 2px; }
.addr-check div span { color: var(--ink-2); font-size: var(--step--1); }
.addr-check--bad strong { color: var(--bad); }
.addr-table { width: 100%; margin: var(--s-4) 0 0; border-collapse: collapse; font-size: var(--step--1); }
.addr-table caption { margin-bottom: var(--s-2); color: var(--muted); text-align: left; }
.addr-table th, .addr-table td { padding: 8px 6px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.addr-table thead th { color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.addr-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.addr-table td:first-child { white-space: normal; }
@media (max-width: 400px) { .addr-table th, .addr-table td { padding-inline: 4px; } }
.addr-bar { display: block; position: relative; width: 100%; min-width: 60px; height: 8px; margin-top: 6px; overflow: hidden; border-radius: var(--pill); background: var(--viz-grid); }
.addr-bar span { display: block; height: 100%; border-radius: inherit; background: var(--good); }
.addr-bar--near span { background: var(--brass); }
.addr-bar--over span { background: var(--bad); }
.addr-nearby th { font-weight: 400; }
.addr-nearby__label { display: block; color: var(--ink); font-weight: 600; }
.addr-nearby__name { display: block; color: var(--muted); overflow-wrap: anywhere; }
.addr-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.addr-list li { display: flex; gap: var(--s-3); justify-content: space-between; align-items: baseline; padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.addr-list li:first-child { border-top: 0; }
.addr-list li div { display: grid; gap: 2px; min-width: 0; }
.addr-list li div span { color: var(--muted); overflow-wrap: anywhere; }
.addr-list__dist { flex: none; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.addr-list a { color: var(--ink); }
.addr-place__facts { margin-bottom: var(--s-4); }
.addr-place p .btn { margin: 0 var(--s-2) var(--s-2) 0; }
.addr-again { margin: 0; }
@media (max-width: 860px) {
    .addr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .addr-form__row { flex-direction: column; }
    .addr-check { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
    .addr-commute li { flex-direction: column; gap: 2px; }
    .addr-commute .addr-list__dist { text-align: left; }
}
@media print {
    .addr-head__links, .addr-again, .addr-form, .crumbs { display: none !important; }
    .addr-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .addr-block, .addr-summary { break-inside: avoid; border-color: #bbb; }
    .addr-sources[open] summary, .addr-sources summary { list-style: none; }
    .addr-sources ul { display: block; }
    .addr-bar { border: 1px solid #999; }
}

/* tools hub /nastroje (templates/tools/index.html.twig) */
.tools-group h2 { margin-bottom: var(--s-4); }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.tools-grid > li { display: flex; }
.tool-card { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; color: var(--ink); text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t) var(--ease); }
.tool-card:hover { border-color: var(--brass-line); transform: translateY(-2px); color: var(--ink); }
.tool-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.tool-card__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.tool-card__text { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.tool-card__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--s-2); color: var(--accent); font-size: var(--step--1); font-weight: 600; }
.biz-builder__variants { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
.biz-builder__variants legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.biz-variant { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; }
.biz-variant:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.biz-variant input { margin-top: 4px; }
.biz-variant span { display: grid; gap: 1px; font-size: var(--step--1); }
.biz-variant small { color: var(--muted); font-size: var(--step--2); }

/* /na-co-dosahnu: housing affordability (public/js/affordability.js; layout shared with .cost of /kalkulacka-bydleni) */
.afford__check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--s-3); color: var(--ink-2); font-size: var(--step--1); cursor: pointer; }
.afford__check input { margin-top: 3px; accent-color: var(--accent); }
.afford__optional { color: var(--muted); font-weight: 400; }
.afford [data-afford-commute][hidden], .afford__map[hidden], .afford-table th[hidden] { display: none; }
.afford__map { margin: 0; }
.afford-table__district { display: block; color: var(--muted); font-size: var(--step--2); white-space: nowrap; }
.afford-table td.num { white-space: nowrap; }

/* ==========================================================================
   Kam se stěhují lidé (templates/migration/index.html.twig)
   ========================================================================== */
.migration__measures { margin-bottom: var(--s-5); }
.migration__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.migration__city { position: relative; }
.migration__results { display: grid; gap: var(--s-4); min-width: 0; }
.migration__map { margin: 0; }
.migration__map .map svg { max-height: 70vh; }
.migration__map figcaption { margin-top: var(--s-2); font-size: var(--step--2); }
.migration__summary { margin: 0; font-size: var(--step-0); font-weight: 600; }
.migration__district, .migration__detail { display: block; color: var(--muted); font-size: var(--step--2); font-weight: 400; }
.migration__table td { vertical-align: top; }
.migration__method p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
    .migration__table .bar-cell { min-width: 110px; }
    .migration__table .bar-cell__track { display: none; }
}

/* "Kde nebude vedro" /kde-nebude-vedro (templates/heat/index.html.twig, public/js/heat.js; the map reuses .finder-map) */
.heat-modes { margin-top: var(--s-4); }
.heat-modes ul { margin: 0; padding: 0; list-style: none; }
.heat__hint { margin: 0; font-size: var(--step--2); }
.heat__reset { margin: var(--s-3) 0 0; font-size: var(--step--1); }
.heat__results { min-width: 0; }
.heat__summary { margin-top: 0; }
.heat__title { margin-top: var(--s-5); }
.heat-table td { vertical-align: middle; }
.heat-table td:nth-child(2) { min-width: 180px; }
.heat-table__meta { display: block; color: var(--muted); font-size: var(--step--2); font-weight: 400; }
.heat-table abbr { text-decoration: none; cursor: help; }
.heat__method { margin-top: var(--s-7); }
.heat-weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-4); max-width: none; margin: var(--s-4) 0; }
.heat-weights__mode ul { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.heat-weights__mode li { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: var(--step--1); }
.heat-weights__mode small { display: block; color: var(--muted); font-size: var(--step--2); }
.heat-weights__bar { height: 6px; border-radius: var(--pill); background: var(--div-mid); overflow: hidden; }
.heat-weights__bar span { display: block; height: 100%; border-radius: var(--pill); background: var(--accent); }
.heat__links { margin-top: var(--s-6); }
.heat__links ul { margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) {
    .heat-table th, .heat-table td { padding-left: 8px; padding-right: 8px; }
}

/* ==========================================================================
   Video tutorials (/navody, "Jak to funguje – video" on tool pages; public/js/tutorials.js)
   ========================================================================== */

.tutorials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--s-6); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.tutorial-video { margin: 0; }
.tutorial-video__frame { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--emerald-deep); box-shadow: var(--shadow); }
.tutorial-video__frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.tutorial-video__frame.is-vertical { width: min(100%, 46vh); margin-inline: auto; }
.tutorial-video__caption { margin-top: var(--s-4); }
.tutorial-video__title { margin: 0; font-size: var(--step-1); }
.tutorial-video__text { margin: var(--s-2) 0 0; color: var(--ink-2); max-width: 62ch; }
.tutorial-video__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--step--1); }
.tutorial-embed { border-top: 1px solid var(--line); }
.tutorial-embed__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-6); align-items: start; }
.tutorial-embed__head h2 { margin: 0; }
.tutorial-embed__head .note { margin: var(--s-3) 0 0; }
.tutorial-embed .tutorial-video__caption { display: none; }
@media (max-width: 760px) {
    .tutorial-embed__inner { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ==========================================================================
   Homepage video tutorials carousel (templates/home/_tutorials.html.twig, public/js/home-tutorials.js)
   ========================================================================== */
.tcar__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.tcar__head .section-head { flex: 1; min-width: 0; }
.tcar__arrows { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.tcar__arrows[hidden] { display: none; }
.tcar__arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; }
.tcar__arrow:hover:not(:disabled) { border-color: var(--brass-line); }
.tcar__arrow:disabled { opacity: .4; cursor: default; }
.tcar__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 42vw, 210px); gap: var(--s-4); margin: 0; padding: 4px 2px var(--s-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; list-style: none; }
.tcar__item { scroll-snap-align: start; min-width: 0; }
.tcar__card { display: grid; gap: var(--s-2); color: var(--ink); text-decoration: none; }
.tcar__poster { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; border: 1px solid var(--line); border-radius: 14px; background: var(--emerald-deep, #0f3d2e); box-shadow: var(--shadow); }
.tcar__poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-fast) var(--ease); }
.tcar__card:hover .tcar__poster img, .tcar__card:focus-visible .tcar__poster img { transform: scale(1.03); }
.tcar__card:focus-visible { outline: none; }
.tcar__card:focus-visible .tcar__poster { outline: 3px solid var(--accent); outline-offset: 2px; }
.tcar__play { position: absolute; left: 50%; bottom: 18%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--emerald-deep, #0f3d2e); box-shadow: 0 4px 14px rgb(0 0 0 / .25); transform: translateX(-50%); }
.tcar__time { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: var(--pill); background: rgb(0 0 0 / .6); color: #fff; font-size: var(--step--2); font-variant-numeric: tabular-nums; }
.tcar__title { font-size: var(--step--1); font-weight: 600; line-height: 1.35; }
.tcar__dialog { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.tcar__dialog.is-vertical { width: min(420px, calc(100vw - 32px)); }
.tcar__dialog::backdrop { background: rgb(0 0 0 / .7); }
.tcar__dialog-inner { display: grid; gap: var(--s-2); padding: var(--s-3); }
.tcar__dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.tcar__dialog-title { margin: 0; font-weight: 600; }
.tcar__close { flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.tcar__video { display: block; width: 100%; max-height: calc(100vh - 170px); border-radius: 10px; background: #000; }
.tcar__dialog-foot { margin: 0; font-size: var(--step--1); }
@media (max-width: 640px) {
    .tcar__arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tcar__poster img { transition: none; }
}