/* brand (design/mockup-redesign-2026-10-26.jpg, docs/REDESIGN.md): teal + coral. White text only on --accent
   (6.4:1) or --coral (>= 4.5:1); the bright --teal and --coral-bright are for icons, pins, fills and dark text */
:root {
    --accent: #0f6b5b;
    --accent-hover: #0b5548;
    --accent-soft: #e6f4ef;
    --teal: #2cae8f;
    --coral: #b4472a;
    --coral-hover: #9a3c23;
    --coral-light: #ff7f5a;
    --coral-bright: #ff7f5a;
    --coral-soft: #fff1ec;
    --ink: #2d3748;
    --muted: #5f6672;
    --line: #e5e9e6;
    --page-bg: #fafaf8;
    /* cards, fields, menus; the white text fill (buttons, active tabs): the brand teal in both themes */
    --surface: #fff;
    --surface-2: #f4f6f5;
    --accent-btn: #0f6b5b;
    --accent-btn-hover: #0b5548;
    --bar-bg: #eef2f1;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(16, 40, 34, .05);
    --shadow: 0 1px 2px rgba(16, 40, 34, .04), 0 6px 20px rgba(16, 40, 34, .06);
    --shadow-hover: 0 2px 4px rgba(16, 40, 34, .06), 0 12px 28px rgba(16, 40, 34, .10);
    /* empty stars and the edges of form fields: 3:1 against white (they were nearly invisible) */
    --control-border: #8a919b;
    --ms: #b45309;
    --ms-soft: #fef3c7;
    --zs: #1d4ed8;
    --zs-soft: #dbeafe;
    --ss: #7e22ce;
    --ss-soft: #f3e8ff;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: #2d3748;
    --bs-body-color-rgb: 45, 55, 72;
    --bs-emphasis-color: #1f2937;
    --bs-primary: #0f6b5b;
    --bs-primary-rgb: 15, 107, 91;
    --bs-link-color: #0f6b5b;
    --bs-link-color-rgb: 15, 107, 91;
    --bs-link-hover-color: #0b5548;
    --bs-link-hover-color-rgb: 11, 85, 72;
    /* secondary text: the mockup's grey darkened a step, so it stays >= 4.5:1 on the light teal panels too */
    --bs-secondary-color: #5f6672;
    --bs-secondary-rgb: 95, 102, 114;
    --bs-border-color: #e5e9e6;
    --bs-border-color-translucent: rgba(16, 40, 34, .1);
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: .875rem;
    --bs-focus-ring-color: rgba(15, 107, 91, .3);
}

body {
    background: var(--page-bg);
}

h1, h2, h1[class], h2[class], .h1, .h2 { color: var(--accent); letter-spacing: -.01em; }
h1, .h1 { font-weight: 700; }
h3, h4, h5, :not(h1, h2).h3, :not(h1, h2).h4, :not(h1, h2).h5 { color: var(--ink); }
h1.h3, h1.h4 { font-weight: 700; }
.text-secondary { color: var(--bs-secondary-color) !important; }

/* cards: white, rounded, a soft shadow instead of a hard edge */
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px); box-shadow: var(--shadow-sm); }
a.card:hover, .card-hover:hover { box-shadow: var(--shadow-hover); border-color: #cfe3db; }
.btn { --bs-btn-border-radius: .625rem; --bs-btn-font-weight: 600; }
.btn-lg { --bs-btn-border-radius: .75rem; }
.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--accent-btn); --bs-btn-border-color: var(--accent-btn);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-btn-hover); --bs-btn-hover-border-color: var(--accent-btn-hover);
    --bs-btn-active-bg: var(--accent-btn-hover); --bs-btn-active-color: #fff;
}
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-control, .form-select { border-radius: .625rem; }
.badge { border-radius: 999px; }
.table { --bs-table-border-color: var(--line); }

.text-accent { color: var(--accent) !important; }

.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent-btn);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-btn-hover);
    --bs-btn-hover-border-color: var(--accent-btn-hover);
    --bs-btn-active-bg: var(--accent-btn-hover);
    --bs-btn-active-color: #fff;
}

/* the mockup's bright coral with dark text (4.8:1; white on it would be 2.5:1) */
.btn-coral {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--coral-bright);
    --bs-btn-border-color: var(--coral-bright);
    --bs-btn-hover-color: #1f2937;
    --bs-btn-hover-bg: #f86c43;
    --bs-btn-hover-border-color: #f86c43;
    --bs-btn-active-bg: #f86c43;
    --bs-btn-active-color: #1f2937;
}

.btn-outline-accent {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-btn);
    --bs-btn-hover-border-color: var(--accent);
}

.site-nav { background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.site-nav .nav-link.active { color: var(--accent); font-weight: 600; }
/* one line per item: "Najít čtvrť" never breaks; the menu collapses below xl instead */
.site-nav .nav-link { white-space: nowrap; }

.site-footer a { text-decoration: none; }

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--accent-soft) 0%, var(--page-bg) 60%);
    border-bottom: 1px solid var(--line);
}
/* Prague drawn behind the right side; on phones fainter and smaller, under the text */
.hero-illustration {
    position: absolute; right: 0; bottom: 0;
    height: 94%; width: auto; max-width: 46%;
    pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
@media (max-width: 991.98px) {
    .hero-illustration { height: auto; width: 70%; max-width: 360px; opacity: .4; }
}

.hero-search { max-width: 640px; }
/* a full scene (mestomat.sk: Bratislava) instead of Prague's cut-out: the whole picture on the right, its left edge
   fading into the page; on phones a full-width strip under the search */
.hero-scene { min-height: 440px; }
.hero-scene-img {
    position: absolute; right: 0; bottom: 0;
    height: 100%; width: auto; max-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
    pointer-events: none;
}
.hero-scene .container { z-index: 2; }
@media (max-width: 991.98px) {
    .hero-scene { min-height: 0; }
    .hero-scene-img {
        left: 0; height: auto; width: 100%;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    }
    .hero-scene .container { padding-bottom: 56vw !important; }
}

.type-card { border-color: var(--line); transition: box-shadow .15s, transform .15s; }
.type-card:hover { box-shadow: 0 .5rem 1rem rgba(15, 107, 91, .14); transform: translateY(-1px); }

.type-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.type-icon.type-ms, .type-pill.type-ms { background: var(--ms-soft); color: var(--ms); }
.type-icon.type-zs, .type-pill.type-zs { background: var(--zs-soft); color: var(--zs); }
.type-icon.type-ss, .type-pill.type-ss { background: var(--ss-soft); color: var(--ss); }

.type-pill {
    display: inline-block; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px;
}

.district-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
    padding: .3rem .8rem; border: 1px solid #d6e4de; border-radius: 999px; background: var(--surface);
    font-size: .875rem; color: var(--bs-body-color); text-decoration: none;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

.soon-card { background: var(--accent-soft); border: 0; }

.school-card { border-color: var(--line); transition: box-shadow .15s; }
.school-card:hover { box-shadow: 0 .4rem .9rem rgba(0, 0, 0, .07); }
.school-card h3 { line-height: 1.35; }

.badge-private { background: #fdf2f8; color: #9d174d; border: 1px solid #fbcfe8; }
.badge-forest { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.badge.text-bg-light { color: #374151 !important; font-weight: 500; }

.stat {
    text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: .4rem .8rem;
    min-width: 92px;
}
.stat-value { font-size: 1.35rem; font-weight: 700; }
.stat-label { font-size: .72rem; color: #6b7280; }

.map { height: 380px; border-radius: var(--radius-lg); border: 1px solid var(--line); z-index: 0; }
@media (max-width: 575px) { .map { height: 280px; } }

.map-dot {
    width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.map-dot.type-ms { background: var(--ms); }
.map-dot.type-zs { background: var(--zs); }
.map-dot.type-ss { background: var(--ss); }
.map-dot.main { width: 20px; height: 20px; box-shadow: 0 0 0 3px rgba(15, 107, 91, .45); }
/* a map marker's tap area (24 px) around its smaller dot */
.map-hit { display: flex; align-items: center; justify-content: center; }

.filter-card { border-color: var(--line); background: var(--surface); }
.district-table td { white-space: nowrap; }
/* headers and names wrap, so a phone fits the name, the time to the centre and the sorted column */
.district-table th, .district-table td:first-child { white-space: normal; vertical-align: bottom; }
.district-table td:first-child { vertical-align: middle; }
.facts dt { font-weight: 500; color: #6b7280; }
.facts dd { margin-bottom: .5rem; }
.auth-container { max-width: 480px; }
.prose { max-width: 760px; }
.breadcrumb-item.text-truncate { max-width: 40ch; }
.nav-tabs .nav-link { color: #4b5563; }
.nav-tabs .nav-link.active { color: var(--accent); font-weight: 600; }

/* reviews */
.bg-accent { background-color: var(--accent-btn) !important; }
.stars { color: #f59e0b; white-space: nowrap; }
.topic-label { min-width: 230px; }
.topic-value { width: 2.2rem; text-align: right; font-weight: 600; }
@media (max-width: 575px) { .topic-label { min-width: 100%; } }
.review-card { border-color: var(--line); }
.review-text { white-space: pre-line; }
.review-form-container { max-width: 760px; }

/* star rating input: radios in reverse order so ~ selects the stars to the left */
/* the radios stay in DOM order 5..1 (the ~ trick below fills the stars to the left); laid out right to left, so star 1
   is on the left AND the arrow keys go the way people see: → more stars, ← fewer (QA 2026-10-27) */
.star-input { display: inline-flex; flex-direction: row; direction: rtl; font-size: 1.4rem; line-height: 1; }
.star-input-lg { font-size: 2rem; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-input label { color: var(--control-border); cursor: pointer; padding: 0 .1rem; }
.star-input input:checked ~ label,
.star-input label:hover, .star-input label:hover ~ label { color: #f59e0b; }
.star-input input:focus-visible + label { outline: 2px solid var(--accent); border-radius: 4px; }
.star-input.is-invalid { outline: 1px solid var(--bs-danger); border-radius: 6px; }

/* catchments */
.catchment-card { border-color: #cfe5df; }
.catchment-school + .catchment-school { border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .75rem; }
.catchment-ms li { padding: .35rem 0; }
.catchment-ms li + li { border-top: 1px solid var(--line); }
.catchment-map { height: 300px; }
.catchment-rules { columns: 2; column-gap: 2rem; }
@media (max-width: 575px) { .catchment-rules { columns: 1; } }
.address-suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; max-height: 320px; overflow-y: auto; }
.address-suggestions .list-group-item { cursor: pointer; }
.address-suggestions .list-group-item.active { background: var(--accent-btn); border-color: var(--accent-btn); }
.noise-control { background: var(--surface); padding: 6px 8px; font-size: .75rem; }
.noise-control .noise-title { font-weight: 600; margin-bottom: 4px; }
.noise-control .btn { font-size: .75rem; padding: 1px 8px; }
.noise-scale { display: flex; margin-top: 6px; }
.noise-scale span { flex: 1; height: 8px; }
.noise-range { color: #6c757d; margin-top: 2px; }
.noise-zoom { color: #b45309; margin-top: 2px; }
.map-dot.type-home { background: #dc2626; width: 20px; height: 20px; border-radius: 4px; }

/* district data: age chart (district vs Prague) and metro line badges */
.age-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.age-label { width: 3.2rem; flex-shrink: 0; color: var(--bs-secondary-color); }
.age-value { width: 2.8rem; flex-shrink: 0; text-align: right; }
.age-bars { flex-grow: 1; }
.age-bar { height: 6px; border-radius: 3px; max-width: 100%; }
.age-bar + .age-bar { margin-top: 2px; }
.age-bar-district { background: var(--teal); }
.age-bar-prague { background: #c9d6d2; }
.age-legend { display: flex; gap: 1rem; }
.age-swatch { display: inline-block; width: .8rem; height: .5rem; border-radius: 2px; vertical-align: middle; }
.housing-chart .age-label { width: 8.5rem; line-height: 1.2; }
.metro-line { display: inline-block; min-width: 1.25rem; padding: 0 .25rem; border-radius: .25rem; color: #fff;
    font-weight: 700; font-size: .75rem; text-align: center; margin-right: .2rem; }
.metro-A { background: #1a9c48; }
.metro-B { background: #f5b800; color: #222; }
.metro-C { background: #d8232a; }
.metro-D { background: #1d71b8; }
.transit-stop { font-weight: 500; }

/* section chips on district and čtvrť pages: stay on top while scrolling, scroll sideways on phones */
.section-nav {
    position: sticky; top: 0; z-index: 1020; background: var(--page-bg); border-bottom: 1px solid var(--line);
    margin: 0 calc(-.5 * var(--bs-gutter-x, 1.5rem)); padding: .5rem calc(.5 * var(--bs-gutter-x, 1.5rem));
    display: flex; gap: .4rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav .chip { flex: 0 0 auto; }
section[id] { scroll-margin-top: 4rem; }

/* "Podrobnosti" and "Jak počítáme" toggles: summary first, details on demand */
details.more > summary {
    cursor: pointer; list-style: none; color: var(--accent); font-size: .875rem; font-weight: 500;
    padding: .35rem 0; user-select: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: ""; display: inline-block; margin-left: .35rem; border: solid currentColor;
    border-width: 0 2px 2px 0; padding: 2.5px; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
details.more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
details.more.method > summary { color: #6b7280; font-weight: 400; font-size: .8rem; }
.chip.active, .section-nav .chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* "Vhodné pro…" grades */
.profile-pill {
    display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px;
    font-size: .8rem; border: 1px solid var(--line); background: var(--surface); color: var(--bs-body-color);
}
.profile-grade { font-weight: 600; }
.profile-pill .bi { font-size: .95rem; line-height: 1; }
.profile-pill.trend-up { border-color: #bbe5cc; background: #effaf3; }
.profile-pill.trend-up .bi { color: #15803d; }
.profile-pill.trend-flat { border-color: #f1df9a; background: #fffbe8; }
.profile-pill.trend-flat .bi { color: #c99a06; }
.profile-pill.trend-down { border-color: #f3c9c9; background: #fdf3f3; }
.profile-pill.trend-down .bi { color: #b91c1c; }
.grade-excellent { border-color: #99d5c9; background: #e6f4f1; }
.grade-excellent .profile-grade { color: #0f766e; }
.grade-good .profile-grade { color: #15803d; }
.grade-average .profile-grade { color: #6b7280; }
.grade-weak { opacity: .8; }
.grade-weak .profile-grade { color: #9ca3af; }
.bg-grade-excellent { background-color: #0f766e !important; }
.bg-grade-good { background-color: #22a06b !important; }
.bg-grade-average { background-color: #9ca3af !important; }
.bg-grade-weak { background-color: #d1d5db !important; }
.rank-number { width: 2rem; flex: 0 0 2rem; font-weight: 700; color: #6b7280; }
.wish-check + .btn { border-radius: 999px; }
.btn-check:checked + .btn-outline-accent { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
.btn-check:checked + .chip { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
.btn-check:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }
label.chip { cursor: pointer; }

/* comparison of čtvrti: the label column narrow on phones, the best value marked */
.compare-table .compare-label { width: 34%; color: #4b5563; }
.compare-table td, .compare-table th { padding-left: .35rem; padding-right: .35rem; }
.compare-table td.compare-best { color: var(--accent); --bs-table-color: var(--accent); font-weight: 600; }
.text-grade-excellent { color: #0f766e; }
.text-grade-good { color: #15803d; }
.text-grade-average, .text-grade-weak { color: #6b7280; }
@media (max-width: 575px) {
    .compare-table { font-size: .82rem; }
    .compare-table .compare-label { width: 30%; }
}

/* the map of čtvrti */
.map-tall { height: 70vh; min-height: 420px; }
.map-metrics .chip { cursor: pointer; }
.map-legend { display: flex; align-items: center; gap: .5rem; }
.map-legend-bar {
    display: inline-block; width: 140px; height: 10px; border-radius: 5px;
    background: linear-gradient(90deg, #0f766e, #2a9d8f, #8ecae6, #f4d58d, #e76f51);
}

/* the "Bydlíte tady?" poll */
.poll-card { background: var(--accent-soft); border: 0; }
.poll-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bar-bg); margin: .2rem 0; }
.poll-bar-part { display: block; height: 100%; }
.poll-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin: 0 .2rem 0 .4rem; }
.poll-part-0 { background: #0f766e; }
.poll-part-1 { background: #5eb5a8; }
.poll-part-2 { background: #f4b183; }
.poll-part-3 { background: #e76f51; }
.poll-part-4 { background: #9ca3af; }
.poll-part-5 { background: #6b7280; }

/* the logo: mark + wordmark (Městomat.cz / Mestomat.sk, the TLD in coral) */
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand-mark { width: 34px; height: 34px; }
.brand-name { font-weight: 800; letter-spacing: -.02em; color: var(--accent); font-size: 1.35rem; }
/* the brand coral, not the light one (2.5:1); bold and large enough to read as large text (3:1) */
.brand-tld { color: var(--coral); }
.site-footer .brand-mark { width: 28px; height: 28px; }
.site-footer .brand-name { font-size: 1.2rem; }
/* tap targets of at least 24 px between the stacked footer links */
.site-footer li { padding: .2rem 0; }

/* home: best čtvrti per figure */
.best-list { padding-left: 1.25rem; margin: 0; }
.best-list li { padding: .15rem 0; }
.best-list li::marker { color: var(--bs-secondary-color); }
.best-list .text-secondary { float: right; margin-left: .5rem; white-space: nowrap; font-size: .875rem; }
/* on phones the cards are a swipeable row instead of a long column */
@media (max-width: 767.98px) {
    .best-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
    .best-row > * { flex: 0 0 82%; max-width: 82%; scroll-snap-align: start; }
}
/* the address page's map stays in view next to the long column on wide screens */
@media (min-width: 992px) { .map-sticky { position: sticky; top: 1rem; height: 520px; } }

/* care for seniors on the map */
.map-dot.type-care-home { background: #7c3aed; }
.map-dot.type-care-special { background: #be185d; }
.map-dot.type-care-day { background: #0369a1; }
.map-legend .map-dot { width: 12px; height: 12px; }
/* doctors pages: private places coral, public (state, region, city) blue, as on the canvas map */
.map-dot.type-doctor { background: #9ca3af; }
.map-dot.type-doctor.type-contract { background: #7b3fa0; }
.map-dot.type-doctor.type-nocontract { background: #ba5a3f; }
/* the place badges: smluvní in the map's purple, bez smlouvy in its coral */
.badge-contract { background: #f3ecf7; color: #5e2d7c; border: 1px solid #dccbe8; }
.badge-nocontract { background: #fbefeb; color: #8f3f29; border: 1px solid #efcfc4; }
/* several places at one address: a bigger dot with their count (map.js) */
.map-dot-count { width: 20px; height: 20px; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.map-popup-list { margin: .25rem 0 0; padding-left: 1rem; max-height: 12rem; overflow-y: auto; }

/* "Jak si čtvrť stojí": rank among all čtvrti per figure, the median marked */
.standing-row { display: grid; grid-template-columns: minmax(6.5rem, 9rem) 5.5rem 1fr; gap: .5rem; align-items: center;
    font-size: .875rem; padding: .2rem 0; }
.standing-value { font-weight: 600; text-align: right; white-space: nowrap; }
.standing-bar { position: relative; height: 10px; background: var(--bar-bg); border-radius: 5px; }
.standing-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: #9ca3af; }
.standing-fill { display: block; height: 100%; border-radius: 5px; }
/* traffic light by the rank among all čtvrti in fifths: red, orange, yellow, light green, dark green; the bar's length
   is the figure itself, so a long bar of a long commute is long and red */
.standing-fill.tone-1 { background-color: #d64545; }
.standing-fill.tone-2 { background-color: #ee8a3c; }
.standing-fill.tone-3 { background-color: #e3b52f; }
.standing-fill.tone-4 { background-color: #6dbb6f; }
.standing-fill.tone-5 { background-color: #1f8a4c; }
@media (max-width: 575px) { .standing-row { grid-template-columns: 6.5rem 4.8rem 1fr; } }
.standing-card { max-width: 760px; }
.place-intro { max-width: 760px; line-height: 1.6; }
.trend-up-color { color: #15803d; } .trend-flat-color { color: #c99a06; } .trend-down-color { color: #b91c1c; }

/* universities */
.map-dot.type-uni { background: #1e40af; }
.bg-accent { background-color: var(--accent-btn) !important; }
.chance-bar::after { display: none; }

/* small bar under a number in a table cell, scaled to the column's largest value */
.cell-bar { display: block; height: 4px; margin-top: 3px; margin-left: auto; width: 4.5rem; background: var(--bar-bg); border-radius: 2px; }
.cell-bar > span { display: block; height: 100%; margin-left: auto; background: #94a3b8; border-radius: 2px; }
.cell-bar-rent > span { background: var(--accent-btn); }

/* a čtvrť's photo above its name; any shape is cropped to the frame, the credit in small print below */
.place-photo { margin: 0 0 .75rem; }
.place-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 6; object-fit: cover; border-radius: 12px;
    background: var(--bar-bg); }
.place-photo figcaption { font-size: .7rem; color: #6b7280; margin-top: .25rem; text-align: right; }
.place-photo figcaption a { color: inherit; }
@media (max-width: 575px) { .place-photo img { aspect-ratio: 16 / 9; } }
@media (min-width: 992px) { .place-photo img { aspect-ratio: auto; height: 260px; } }

/* MailFormGuard honeypot: invisible for people */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* the safety map (SafetyController): 5 steps from clearly calmer than Prague to clearly more, as safety-map.js */
.safety-map { height: 460px; }
@media (max-width: 575px) { .safety-map { height: 360px; } }
.safety-legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.safety-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.safety-level-0 { background: #2e7d5b; }
.safety-level-1 { background: #8fbf8f; }
.safety-level-2 { background: #e9d98b; }
.safety-level-3 { background: #e8a27c; }
.safety-level-4 { background: #c4553a; }

/* the "Uložit a hlídat" box for anonymous visitors (fragments/saved :: invite) */
.save-invite { border-color: var(--line); background: var(--accent-soft); }

/* the language switch's flag: tells it apart from the other menu links */
.lang-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); vertical-align: -2px; }

/* guides (/pruvodce): a readable column, data blocks as cards */
.guide-body { max-width: 760px; }
.guide-text h2 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: .75rem; }
.guide-text h3 { font-size: 1.05rem; margin-top: 1.5rem; }
.guide-text p, .guide-text li { line-height: 1.65; }
.guide-text ul, .guide-text ol { padding-left: 1.25rem; }
.guide-ranking { padding-left: 1.4rem; }
.guide-ranking li { padding: .35rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.guide-ranking li:last-child { border-bottom: 0; }
.guide-link:hover { border-color: var(--bs-secondary-color); }
.guide-card h3 a:hover { text-decoration: underline; }

/* the tiny review: star rows far enough apart to tap */
.quick-stars > div { padding: .2rem 0; }

/* a flex child that may shrink below its content (long practice names wrap instead of pushing the save button out) */
.min-w-0 { min-width: 0; }

/* the review ask under the headline numbers (fragments/review-ask) */
.review-ask {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
    background: var(--accent-soft); border-radius: .75rem; padding: .6rem .9rem;
}
.text-coral { color: var(--coral) !important; }

/* the compare list at the bottom of the screen (fragments/places :: tray) */
.compare-tray {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: var(--surface); border-top: 1px solid var(--accent-soft); box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    padding: .5rem 0;
}
body.has-compare-tray { padding-bottom: 4.5rem; }

/* the small photo on top of a section's card (fragments/section-photo) */
.section-photo { position: relative; margin: 0; }
.section-photo img { display: block; width: 100%; height: 130px; object-fit: cover;
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; }
.section-photo figcaption { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: .1rem .45rem;
    font-size: .65rem; color: #fff; background: rgba(0, 0, 0, .5); border-top-left-radius: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-photo figcaption a { color: inherit; }
@media (min-width: 992px) { .section-photo img { height: 150px; } }
/* a section photo outside a card (Slovak doctors' section): rounded on every corner */
.section-photo-plain:empty { display: none; }
.section-photo-plain .section-photo img { border-radius: 12px; }
@media (min-width: 992px) {
    .card:has(> .section-photo-aside) { flex-direction: row-reverse; }
    .section-photo-aside { flex: 0 0 38%; }
    .section-photo-aside img { height: 100%;
        border-radius: 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0; }
}
/* the crime chart: Prague's tick where the rate puts it, not in the middle as on the standing bars */
.crime-bar::after { left: var(--tick); }

/* form fields with visible edges (empty stars use the same colour) */
.form-control, .form-select, .form-check-input { border-color: var(--control-border); }
.form-check-input:checked { border-color: var(--accent-btn); background-color: var(--accent-btn); }

/* what waits for moderation, next to a moderator's name in the menu */
.nav-count { background: var(--coral); color: #fff; font-weight: 600; }

/* map of čtvrti: a calm, neutral base map so the colours and the street names read well (the user: "I don't know
   where I am"), and the čtvrti's names from district zoom on */
#neighbourhood-map .leaflet-tile-pane { filter: grayscale(0.75) contrast(1.15) brightness(0.97); }
.map-label { background: none; border: 0; color: #1f2937; font-size: .72rem; font-weight: 600; white-space: nowrap;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; transform: translate(-50%, -50%); pointer-events: none; }

/* home: the newest reviews and the ask next to them */
.review-mini:hover { border-color: var(--accent); }
.review-mini-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.review-ask-card { background: var(--accent-soft); border-color: transparent; }

/* Lighthouse 2026-10-26: Bootstrap's grey outline buttons had 4.1:1 contrast (4.5 needed); one-line links (e-mails,
   phones on school pages) were under the 24 px touch target */
.btn-outline-secondary { --bs-btn-color: #545b62; --bs-btn-border-color: #8a919b; }
.contact-links a { display: inline-block; padding: .2rem 0; }

/* address report ("Prověřit adresu") on top of the address page */
.report-card { border-color: var(--accent-soft); box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.report-kicker { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.report-points li { display: flex; gap: .5rem; margin-bottom: .35rem; }
.report-points .bi { flex-shrink: 0; }
.report-compare { border-top: 1px solid #e9ecef; margin-top: 1rem; padding-top: 1rem; }
.report-tile { border-radius: .5rem; padding: .5rem .75rem; background: var(--surface-2); height: 100%; }
.report-tile.report-better { background: var(--accent-soft); }
.report-tile.report-worse { background: #fbeee9; }

/* "Doporučíme vám čtvrť" (profile/recommend.html) */
.recommend-step { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem;
    border-radius: 50%; background: var(--bs-secondary-bg); font-size: .8rem; margin-right: .25rem; }
.recommend-best { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }

/* "Žebříčky" hub (district/rankings.html) */
.ranking-card { transition: border-color .15s; }
.ranking-card:hover { border-color: var(--teal); }

/* home hero (redesign 2026-10-26): the photo on the right fading into the page, the text on the left, a wave below;
   on phones the photo is a strip under the text */
.hero-photo { background: var(--page-bg); border-bottom: 0; overflow: visible; }
/* the photo fades into the page on its left and bottom edges (the owner preferred that to a white wave, 2026-10-26) */
.hero-photo-img { overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.hero-photo-img { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; margin: 0; }
.hero-photo-img img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 60%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.hero-photo-img figcaption { position: absolute; right: .5rem; bottom: 3.2rem; z-index: 2; font-size: .65rem; color: #fff;
    background: rgba(0, 0, 0, .45); padding: .05rem .4rem; border-radius: 4px; }
.hero-photo-img figcaption a { color: inherit; }
.hero-photo .hero-photo-text { position: relative; z-index: 3; padding-top: 3.5rem; padding-bottom: 4.5rem; }
.hero-title { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.hero-lead { font-size: 1.1rem; color: var(--ink); max-width: 36rem; margin-top: 1rem; }
.hero-hint { font-size: .85rem; color: var(--muted); margin: .5rem 0 0 1.25rem; }
.hero-links { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1.25rem; font-size: .92rem; font-weight: 500; }
.hero-links a { text-decoration: none; }
.hero-links a:hover { text-decoration: underline; }
.hero-searchbar-box { display: flex; align-items: center; gap: .5rem; background: var(--surface); border-radius: 999px; padding: .4rem .4rem .4rem 1.1rem;
    box-shadow: var(--shadow); border: 1px solid var(--line); }
.hero-searchbar-box:focus-within { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color), var(--shadow); }
.hero-searchbar-icon { color: var(--accent); font-size: 1.15rem; }
.hero-searchbar-box .form-control { border: 0; box-shadow: none; padding: .5rem .25rem; font-size: 1.05rem; background: transparent; }
.hero-searchbar-box .btn { border-radius: 999px; padding: .6rem 1.6rem; font-size: 1.05rem; }
.address-suggestions .suggest-kind { font-size: .75rem; color: var(--muted); margin-left: .4rem; }
.address-suggestions .list-group-item.active .suggest-kind { color: #e6f4ef; }
@media (max-width: 991.98px) {
    .hero-photo-img { position: relative; width: 100%; height: 52vw; max-height: 340px; order: 2; }
    .hero-photo { display: flex; flex-direction: column; }
    .hero-photo-img img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%); mask-image: linear-gradient(180deg, transparent 0%, #000 25%); }
    .hero-photo .hero-photo-text { padding-top: 1.5rem; padding-bottom: .5rem; }
    .hero-photo-img figcaption { bottom: 2.6rem; }
}
@media (max-width: 575.98px) {
    .hero-searchbar-box { padding-left: .8rem; }
    .hero-searchbar-box .btn { padding: .55rem 1rem; }
    .hero-searchbar-box .form-control { font-size: .95rem; }
}

/* home category tiles: an outline icon over a short label, white cards in one row (two rows of three on phones) */
.category-tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: .75rem; margin-top: 1.5rem; }
@media (max-width: 1199.98px) { .category-tiles { grid-template-columns: repeat(4, 1fr); } }
.category-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center;
    padding: 1.1rem .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; line-height: 1.25; transition: box-shadow .15s, transform .15s; }
.category-tile .bi { font-size: 1.9rem; color: var(--accent); }
.category-tile:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); color: var(--accent); }
/* phones: two columns of wide tiles, the icon beside the label */
@media (max-width: 575.98px) {
    .category-tiles { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .category-tile { flex-direction: row; justify-content: flex-start; text-align: left; padding: .75rem; gap: .6rem; font-size: .85rem; }
    .category-tile .bi { font-size: 1.4rem; }
}

/* home feature cards: light teal, light coral, dark teal */
.feature-card { border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; }
.feature-card p { flex-grow: 1; margin-bottom: 1rem; }
.feature-icon { font-size: 1.8rem; margin-bottom: .5rem; }
.feature-nature { background: var(--accent-soft); }
.feature-nature .feature-icon { color: var(--teal); }
.feature-family { background: var(--coral-soft); }
.feature-family .feature-icon { color: var(--coral-bright); }
.feature-family h2 { color: var(--ink); }
.feature-link { color: var(--coral); font-weight: 600; text-decoration: none; }
.feature-compare { background: var(--accent-btn); color: #fff; }
.feature-compare h2 { color: #fff; }
.feature-compare .feature-icon { color: #9be3cf; }
.feature-compare .btn-light { color: var(--accent); font-weight: 600; }

/* footer (redesign): light teal, the tagline under the logo, a thin line above the copyright */
.site-footer { background: var(--accent-soft); }
.site-footer .fw-semibold.text-uppercase { color: var(--accent); letter-spacing: .04em; font-size: .75rem; }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.footer-tagline { color: var(--accent); font-weight: 600; margin-bottom: .5rem; }
.footer-bottom { border-top: 1px solid rgba(15, 107, 91, .15); margin-top: 1.5rem; padding-top: 1rem; }
.photo-credit { font-size: .72rem; color: var(--muted); margin: 2.5rem 0 0; }
.photo-credit a { color: inherit; }

/* map pins (redesign 2026-10-26, map.js): a teardrop in the category's colour with its icon, white edge, soft shadow;
   the page's own place bigger with a ring. The canvas circles (300+ markers) and the legends keep the dots. */
.map-pin-icon { background: none; border: 0; }
.map-pin { --pin: #6b7280; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--pin); border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(16, 40, 34, .35); }
.map-pin > i, .map-pin > span { transform: rotate(45deg); color: #fff; font-size: 14px; line-height: 1; font-weight: 700; font-style: normal; }
.map-pin > span { font-size: 12px; }
.map-pin.main { box-shadow: 0 0 0 4px rgba(15, 107, 91, .35), 0 2px 8px rgba(16, 40, 34, .4); }
.map-pin.main > i { font-size: 17px; }
.map-pin.type-ms { --pin: var(--ms); }
.map-pin.type-zs { --pin: var(--zs); }
.map-pin.type-ss { --pin: var(--ss); }
.map-pin.type-uni { --pin: #1e40af; }
.map-pin.type-doctor { --pin: #6b7280; }
.map-pin.type-doctor.type-contract { --pin: #7b3fa0; }
.map-pin.type-doctor.type-nocontract { --pin: #c2512f; }
.map-pin.type-home { --pin: var(--accent); }
.map-pin.type-care-home { --pin: #7c3aed; }
.map-pin.type-care-special { --pin: #be185d; }
.map-pin.type-care-day { --pin: #0369a1; }
.leaflet-marker-icon.map-pin-icon:hover { z-index: 2000 !important; }
.leaflet-marker-icon.map-pin-icon:hover .map-pin { filter: brightness(1.08); }

/* popups as small cards */
.leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--shadow-hover); }
.leaflet-popup-content { margin: .75rem 1rem; font-family: var(--bs-body-font-family); font-size: .875rem; line-height: 1.4; }
.leaflet-popup-content a { color: var(--accent); }

/* inner pages (redesign phase 7): a section's title gets its category's icon on a light teal tile, picked by the
   section id, so čtvrť, MČ, school and city pages share it without template changes */
:is(#najemne, #doprava, #parky-a-hluk, #zelen-a-hluk, #parky, #obchody-a-sluzby, #nocni-zivot, #lekari, #skoly,
    #hodnoceni, #sousedni-ctvrti, #obyvatele, #domy-a-byty, #kriminalita, #spadovost, #okoli, #v-okoli, #zebricek)
    h2:first-of-type { display: flex; align-items: center; gap: .6rem; }
:is(#najemne, #doprava, #parky-a-hluk, #zelen-a-hluk, #parky, #obchody-a-sluzby, #nocni-zivot, #lekari, #skoly,
    #hodnoceni, #sousedni-ctvrti, #obyvatele, #domy-a-byty, #kriminalita, #spadovost, #okoli, #v-okoli, #zebricek)
    h2:first-of-type::before, .title-icon {
    font-family: bootstrap-icons; font-weight: 400; font-size: 1.05rem; line-height: 1; flex: 0 0 2.1rem;
    width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
#najemne h2:first-of-type::before { content: "\f632"; }
#doprava h2:first-of-type::before { content: "\f81d"; }
:is(#parky-a-hluk, #zelen-a-hluk, #parky) h2:first-of-type::before { content: "\f5e2"; }
#obchody-a-sluzby h2:first-of-type::before { content: "\f244"; }
#nocni-zivot h2:first-of-type::before { content: "\f496"; }
#lekari h2:first-of-type::before { content: "\f76f"; }
#skoly h2:first-of-type::before { content: "\f6fe"; }
#hodnoceni h2:first-of-type::before { content: "\f255"; }
#sousedni-ctvrti h2:first-of-type::before { content: "\f47f"; }
#obyvatele h2:first-of-type::before { content: "\f4d0"; }
#domy-a-byty h2:first-of-type::before { content: "\f87d"; }
#kriminalita h2:first-of-type::before { content: "\f52f"; }
#spadovost h2:first-of-type::before { content: "\f546"; }
:is(#okoli, #v-okoli) h2:first-of-type::before { content: "\f3e8"; }
#zebricek h2:first-of-type::before { content: "\f6fe"; }
.title-icon { font-family: inherit; }
.title-icon > .bi { font-size: 1.05rem; }
h2.h6 .title-icon, .card-title-row .title-icon { flex-basis: 1.9rem; width: 1.9rem; height: 1.9rem; border-radius: 9px; }
h2:has(.title-icon) { display: flex; align-items: center; gap: .55rem; }

/* card headings inside sections: brand colour, a bit more weight */
.card h2.h6, .card h3.h6 { color: var(--accent); font-weight: 600; }
/* the sticky section chips: white bar with a soft edge */
.section-nav { background: color-mix(in srgb, var(--page-bg) 94%, transparent); backdrop-filter: blur(6px); border-bottom-color: var(--line); }
.section-nav .chip { background: var(--surface); }
/* the stat boxes next to a čtvrť's name */
.stat-value { color: var(--accent); }
/* picked answers (review relation, quick review) in the brand colour, not Bootstrap's grey */
.btn-check:checked + .btn-outline-secondary { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }

/* "Co je v okolí?" (redesign phase 6): pill tabs, a row per kind with its icon tile, the distance and the walk */
.nearby-tabs { gap: .35rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.nearby-tabs::-webkit-scrollbar { display: none; }
.nearby-tabs .nav-link { border-radius: 999px; padding: .3rem .85rem; font-size: .875rem; color: var(--ink); white-space: nowrap;
    border: 1px solid var(--line); background: var(--surface); }
.nearby-tabs .nav-link.active { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
.nearby-list li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.nearby-list li:first-child { border-top: 0; }
.nearby-icon { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.nearby-name { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.nearby-name .fw-semibold { overflow-wrap: anywhere; }
.nearby-distance { text-align: right; font-weight: 600; line-height: 1.3; }
.nearby-distance .small { font-weight: 400; }

/* admin lists (reviews, unconfirmed drafts): white cards with a head line, the text and a line of facts */
.admin-list { display: flex; flex-direction: column; gap: .5rem; }
.admin-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; box-shadow: var(--shadow-sm); }
.admin-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.admin-item-text { margin: .35rem 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.admin-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin-top: .4rem; font-size: .8rem; color: var(--muted); }

/* "almost done" page (message/pending): amber, not the green "done" */
.pending-card { background: #fffbeb; border: 1px solid #f6d58a; border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.pending-icon { width: 3.25rem; height: 3.25rem; border-radius: 14px; background: #fde68a; color: #92400e; display: inline-flex;
    align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: .75rem; }
.pending-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #92400e; margin-bottom: .25rem; }
.pending-card h1 { color: var(--ink); }
.pending-steps { padding-left: 1.25rem; margin-bottom: 1rem; }
.pending-steps li { padding: .2rem 0; }
.pending-steps li::marker { font-weight: 700; color: #92400e; }

/* dark mode (redesign phase 8): <html data-bs-theme="dark">, set before paint by layout.html from the visitor's choice
   (localStorage "theme") or the system setting; Bootstrap's own components follow data-bs-theme, ours the tokens.
   Text and links use a light teal (--accent); white-text fills keep the brand teal (--accent-btn). */
[data-bs-theme=dark] {
    --page-bg: #0f1614;
    --surface: #17211e;
    --surface-2: #1e2a26;
    --bar-bg: #26332f;
    --ink: #e3eae7;
    --muted: #a2ada9;
    --line: #2a3833;
    --accent: #5fcfb3;
    --accent-hover: #86ddc8;
    --accent-soft: #17332c;
    --accent-btn: #11806b;
    --accent-btn-hover: #149077;
    --teal: #3cc4a2;
    --coral: #ff9a7a;
    --coral-hover: #ffb59c;
    --coral-soft: #35211b;
    --ms-soft: #3a2a10; --zs-soft: #16254a; --ss-soft: #2f1a45;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .35);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .45);
    --control-border: #5d6a66;
    --bs-body-bg: #0f1614;
    --bs-body-bg-rgb: 15, 22, 20;
    --bs-body-color: #e3eae7;
    --bs-body-color-rgb: 227, 234, 231;
    --bs-emphasis-color: #fff;
    --bs-secondary-color: #a2ada9;
    --bs-secondary-rgb: 162, 173, 169;
    --bs-secondary-bg: #1e2a26;
    --bs-tertiary-bg: #17211e;
    --bs-border-color: #2a3833;
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
    --bs-link-color: #5fcfb3;
    --bs-link-color-rgb: 95, 207, 179;
    --bs-link-hover-color: #86ddc8;
    --bs-link-hover-color-rgb: 134, 221, 200;
    color-scheme: dark;
}
[data-bs-theme=dark] .bg-light, [data-bs-theme=dark] .bg-white { background-color: var(--surface-2) !important; }
[data-bs-theme=dark] .text-bg-light { background-color: var(--surface-2) !important; color: var(--ink) !important; }
[data-bs-theme=dark] .badge.text-bg-light { color: var(--ink) !important; }
[data-bs-theme=dark] .btn-light { --bs-btn-bg: #e3eae7; --bs-btn-color: #0f1614; }
[data-bs-theme=dark] .text-dark { color: var(--ink) !important; }
[data-bs-theme=dark] .site-footer { background: #121c19; }
[data-bs-theme=dark] .brand-tld { color: var(--coral); }
[data-bs-theme=dark] .btn-outline-secondary { --bs-btn-color: #c3ccc9; --bs-btn-border-color: #5d6a66; --bs-btn-hover-bg: #2a3833;
    --bs-btn-hover-border-color: #5d6a66; --bs-btn-hover-color: #fff; }
[data-bs-theme=dark] .pending-card { background: #2b2412; border-color: #6b5520; }
[data-bs-theme=dark] .pending-icon { background: #5a4615; color: #fde68a; }
[data-bs-theme=dark] .pending-kicker, [data-bs-theme=dark] .pending-steps li::marker { color: #f6c453; }
[data-bs-theme=dark] .feature-compare .feature-icon { color: #9be3cf; }
[data-bs-theme=dark] .profile-pill.trend-up { background: #14301f; border-color: #255c3a; }
[data-bs-theme=dark] .profile-pill.trend-flat { background: #2e2810; border-color: #5e5020; }
[data-bs-theme=dark] .profile-pill.trend-down { background: #331616; border-color: #6a2a2a; }
[data-bs-theme=dark] .report-tile.report-worse { background: #35211b; }
[data-bs-theme=dark] .badge-contract { background: #2a1d33; color: #d9b8ec; border-color: #4b3460; }
[data-bs-theme=dark] .badge-nocontract { background: #35211b; color: #ffb59c; border-color: #5e3628; }
/* maps: the light OSM tiles inverted into a dark map (pins and lines stay in their colours) */
[data-bs-theme=dark] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.5); }
[data-bs-theme=dark] .leaflet-container { background: #1b2421; }
[data-bs-theme=dark] .leaflet-popup-content-wrapper, [data-bs-theme=dark] .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
[data-bs-theme=dark] .leaflet-bar a, [data-bs-theme=dark] .noise-control { background: var(--surface); color: var(--ink); border-color: var(--line); }
[data-bs-theme=dark] .map-label { color: #e3eae7; text-shadow: 0 0 3px #000, 0 0 3px #000; }
[data-bs-theme=dark] .hero-photo-img img { filter: brightness(.85); }

/* the theme switch in the menu */
.theme-toggle { background: none; border: 0; color: var(--bs-nav-link-color); padding: .5rem; line-height: 1; font-size: 1.1rem; }
.theme-toggle:hover { color: var(--accent); }
.theme-toggle .bi-sun { display: none; }
[data-bs-theme=dark] .theme-toggle .bi-sun { display: inline; }
[data-bs-theme=dark] .theme-toggle .bi-moon-stars { display: none; }
[data-bs-theme=dark] .brand-mark { filter: brightness(1.9) saturate(.8); }
[data-bs-theme=dark] .feature-compare .btn-light { color: #0b5548; }
/* dark mode readability (QA 2026-10-26, contrast under 3:1): greys and school-type colours from the light theme */
.nav-tabs .nav-link { color: var(--muted); }
.compare-table .compare-label { color: var(--muted); }
/* light school-type text only on the pills and icon tiles: map pins keep the darker fills under their white icons */
[data-bs-theme=dark] :is(.type-pill, .type-icon).type-ms { color: #f5a54a; }
[data-bs-theme=dark] :is(.type-pill, .type-icon).type-zs { color: #8db4ff; }
[data-bs-theme=dark] :is(.type-pill, .type-icon).type-ss { color: #d0a2ff; }
[data-bs-theme=dark] .nav-tabs .nav-link.active { color: var(--accent); background: var(--surface); border-color: var(--line) var(--line) var(--surface); }

/* "Co je ve čtvrti?": a place's free photo as a rounded square, its credit in small print */
.place-thumb { flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.photo-credit-line { font-size: .68rem; color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.photo-credit-line:hover { text-decoration: underline; }
#ve-ctvrti h2:first-of-type { display: flex; align-items: center; gap: .6rem; }
#ve-ctvrti h2:first-of-type::before { content: "\f3e8"; font-family: bootstrap-icons; font-weight: 400; font-size: 1.05rem;
    flex: 0 0 2.1rem; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--accent-soft); color: var(--accent); }

/* keyboard focus on our own buttons: Bootstrap's ring needs the colour of each button (QA 2026-10-27: none showed) */
.btn-accent, .btn-primary, .btn-outline-accent { --bs-btn-focus-shadow-rgb: 15, 107, 91; }
.btn-coral { --bs-btn-focus-shadow-rgb: 194, 81, 47; }
[data-bs-theme=dark] :is(.btn-accent, .btn-primary, .btn-outline-accent) { --bs-btn-focus-shadow-rgb: 95, 207, 179; }
.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: var(--accent-btn); color: #fff; padding: .5rem 1rem; border-radius: .5rem; }