:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-soft: #eef4ff;
    --text: #162033;
    --muted: #64748b;
    --line: #dbe3ef;
    --primary: #1457d9;
    --primary-dark: #0e3e9e;
    --success: #087a55;
    --success-bg: #e7f8f1;
    --shadow: 0 14px 34px rgba(28, 48, 83, 0.09);
    --radius: 16px;
    --container: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
button, input { font: inherit; }
code { word-break: break-word; }
.container { width: min(var(--container), calc(100% - 36px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 1100;   /* above .theme-switch.on-map, which also asked for 1000 and came later */
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.header-row { min-height: 72px; display: grid; grid-template-columns: auto minmax(260px, 560px) auto; gap: 24px; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary); color: white; font-size: 21px; }
.header-search { display: flex; min-width: 0; }
.header-search input { flex: 1; min-width: 0; border: 1px solid var(--line); border-right: 0; border-radius: 11px 0 0 11px; padding: 10px 13px; background: #f8fafc; color: var(--text); }
.header-search button, .search-form button { border: 0; background: var(--primary); color: white; padding: 10px 16px; border-radius: 0 11px 11px 0; cursor: pointer; font-weight: 700; }
.header-nav { display: flex; align-items: center; gap: 18px; font-weight: 700; white-space: nowrap; }

.site-main { min-height: calc(100vh - 150px); }
.hero { padding: 72px 0 56px; background: radial-gradient(circle at 85% 20%, #d9e8ff 0, transparent 34%), linear-gradient(135deg, #fff 0%, #eef5ff 100%); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 56px; align-items: center; }
.eyebrow { margin: 0 0 8px; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; }
h1 { margin: 0 0 16px; font-size: clamp(2.25rem, 5vw, 4.6rem); }
h2 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); }
h3 { margin: 0; }
.lead { max-width: 760px; margin: 0; color: #475569; font-size: 1.1rem; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 30px; }
.stats-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 0; }
.stat { background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: var(--radius); padding: 19px; box-shadow: 0 8px 24px rgba(28,48,83,.05); }
.stat strong { display: block; font-size: 1.55rem; }
.stat span { display: block; color: var(--muted); font-size: .9rem; }

.section { padding-top: 48px; padding-bottom: 64px; }
.section-block { margin-top: 40px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.country-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.country-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; color: var(--text); box-shadow: 0 5px 18px rgba(28,48,83,.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.country-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #aac5f8; color: var(--text); }
.country-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.country-code { display: inline-flex; border-radius: 999px; background: var(--surface-soft); color: var(--primary); padding: 4px 9px; font-size: .78rem; font-weight: 800; }
.arrow { font-size: 1.2rem; color: var(--primary); }
.country-card h3 { font-size: 1.25rem; margin-bottom: 18px; }
.country-card dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0; }
.country-card dl div { min-width: 0; }
.country-card dt { color: var(--muted); font-size: .72rem; }
.country-card dd { margin: 2px 0 0; font-weight: 800; }

.page-hero { padding: 42px 0 34px; background: var(--surface); border-bottom: 1px solid var(--line); }
.small-hero { padding-bottom: 28px; }
.entity-hero { background: linear-gradient(180deg, #fff, #f6f9fe); }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 25px; color: var(--muted); font-size: .88rem; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--primary); }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.page-title-row h1 { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 10px; }
.native-name { margin: -3px 0 0; color: var(--muted); font-size: 1.15rem; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 11px; background: var(--primary); color: white; font-weight: 800; border: 1px solid var(--primary); }
.button:hover { background: var(--primary-dark); color: white; }
.button.secondary { background: white; color: var(--primary); border-color: #b8c9e9; }
.button.secondary:hover { border-color: var(--primary); background: var(--surface-soft); }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; background: var(--surface-soft); color: var(--primary); font-size: .75rem; font-weight: 800; }
.badge.success { background: var(--success-bg); color: var(--success); }
.muted-badge { background: #eef1f5; color: #4b5563; }

.two-column { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: start; }
.entity-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 34px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 7px 24px rgba(28,48,83,.04); }
.sticky-panel { position: sticky; top: 94px; }
.panel h2 { font-size: 1.2rem; margin-bottom: 18px; }
.panel h3 { margin: 24px 0 10px; font-size: 1rem; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.panel-heading h2 { margin: 0; }
.map-panel { padding: 14px; }
.map { height: 520px; border-radius: 12px; overflow: hidden; background: #e8edf5; }

.entity-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.entity-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px 18px; color: var(--text); border-bottom: 1px solid var(--line); transition: background .15s ease; }
.entity-row:last-child { border-bottom: 0; }
.entity-row:hover { background: #f8fbff; color: var(--text); }
.entity-main { min-width: 0; }
.entity-main strong { display: block; overflow-wrap: anywhere; }
.entity-main span { display: block; color: var(--muted); font-size: .87rem; margin-top: 2px; }
.entity-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--muted); font-size: .82rem; text-align: right; }
.kind-list { display: grid; gap: 2px; }
.kind-list a { display: flex; justify-content: space-between; gap: 16px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--text); }
.kind-list a:last-child { border-bottom: 0; }
.kind-list strong { color: var(--primary); }

.details-list, .translation-list { margin: 0; }
.details-list > div, .translation-list > div { display: grid; grid-template-columns: minmax(110px,.9fr) minmax(0,1.1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.details-list > div:last-child, .translation-list > div:last-child { border-bottom: 0; }
.cp-urls { list-style: none; margin: 0 0 8px; padding: 0; }
.cp-urls li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .86rem; overflow-wrap: anywhere; }
.cp-urls li:last-child { border-bottom: 0; }
.population-series { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: .9rem; }
.population-series th { color: var(--muted); font-size: .8rem; font-weight: 600; text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line); }
.population-series td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.population-series th:last-child, .population-series td:last-child { text-align: right; font-weight: 650; }
.population-series tr:last-child td { border-bottom: 0; }
.population-series small { display: block; color: var(--muted); font-size: .76rem; font-weight: 400; overflow-wrap: anywhere; }
.population-series small a { display: block; }
.population-series tr.is-disagreeing td { background: #fff6e0; }
.population-series tr.is-census td { font-weight: 650; }
.nsi-population tbody { display: block; max-height: 420px; overflow-y: auto; }
.nsi-population thead, .nsi-population tbody tr { display: table; width: 100%; table-layout: fixed; }
.quality-issue, .people-group { border-bottom: 1px solid var(--line); }
.quality-issue > summary, .people-group > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; cursor: pointer; font-weight: 650; }
.quality-issue > summary small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }
.quality-issue .entity-list { margin-bottom: 14px; }
.quality-more { font-size: .82rem; margin: 8px 0 0; }
.people-list { list-style: none; margin: 0 0 14px; padding: 0; }
.people-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.people-row:last-child { border-bottom: 0; }
.people-row small { display: block; color: var(--muted); font-size: .8rem; }
.people-row .people-note { font-style: italic; }
.people-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; font-size: .78rem; }
.people-row.status-disputed { background: #fff6e0; }
.badge.warning { background: #fdebc8; color: #8a5a00; }
.population-note { font-size: .8rem; margin: 0 0 12px; }
.details-list dt, .translation-list dt { color: var(--muted); font-size: .84rem; }
.details-list dd, .translation-list dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
.details-list small { color: var(--muted); }
.relation-list { display: grid; gap: 8px; }
.relation-list a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; background: #f8fafc; border-radius: 9px; color: var(--text); }
.relation-list small { color: var(--muted); }

.search-form { margin-top: 22px; display: grid; grid-template-columns: minmax(220px, 1fr) 90px 160px auto; max-width: 900px; }
.search-form input { min-width: 0; border: 1px solid var(--line); border-right: 0; padding: 11px 12px; background: white; }
.search-form input:first-child { border-radius: 11px 0 0 11px; }
.search-form button { border-radius: 0 11px 11px 0; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 22px; padding: 14px 18px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.empty-state { padding: 30px; background: white; border: 1px dashed #b9c5d7; border-radius: var(--radius); color: var(--muted); text-align: center; }

.error-page { padding-top: 90px; padding-bottom: 100px; text-align: center; }
.error-code { margin: 0; color: var(--primary); font-size: 5rem; line-height: 1; font-weight: 900; }
.error-page .lead { margin-inline: auto; margin-bottom: 26px; }
.error-actions { display: flex; justify-content: center; gap: 12px; }
.debug-box { max-width: 900px; margin: 20px auto; padding: 15px; overflow: auto; text-align: left; background: #1f2937; color: #f8fafc; border-radius: 10px; }

.site-footer { border-top: 1px solid var(--line); background: white; color: var(--muted); }
.footer-row { min-height: 74px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
/* where the data comes from: quiet, on one line, wrapping on a telephone */
.footer-sources { flex: 1 1 auto; text-align: center; font-size: .88rem; }
.footer-sources a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-sources a:hover { color: var(--primary); }

@media (max-width: 980px) {
    .header-row { grid-template-columns: auto 1fr; }
    .header-search { grid-column: 1 / -1; grid-row: 2; padding-bottom: 12px; }
    .header-nav { justify-self: end; }
    .hero-grid, .two-column, .entity-layout { grid-template-columns: 1fr; }
    .country-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sticky-panel { position: static; }
    .map { height: 430px; }
}

@media (max-width: 680px) {
    .container { width: min(100% - 22px, var(--container)); }
    .header-row { gap: 12px; }
    .brand span:last-child { display: none; }
    .header-nav { gap: 12px; font-size: .9rem; }
    .hero { padding-top: 48px; }
    .country-grid { grid-template-columns: 1fr; }
    .stats-grid, .stats-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .page-title-row { align-items: flex-start; flex-direction: column; }
    .page-title-row .button { width: 100%; }
    .entity-row { align-items: flex-start; }
    .entity-meta { flex-direction: column; align-items: flex-end; gap: 5px; }
    .search-form { grid-template-columns: 1fr 72px; gap: 8px; }
    .search-form input { border: 1px solid var(--line); border-radius: 9px !important; }
    .search-form button { border-radius: 9px; }
    .search-form input[name="kind"] { grid-column: 1 / -1; }
    .map { height: 340px; }
    .footer-row { flex-direction: column; justify-content: center; padding: 16px 0; }
}

/* public site (router_public.php, 2026-09-14): no technical badges ("boundary") for visitors */
.is-public .badge.success { display: none; }

/* themes of the public site (2026-09-16): the satellite map and the theme switch */
.satellite-frame { display: block; width: 100%; height: 560px; border: 0; border-radius: 12px; background: #e8edf5; }
.satellite-links { margin: 10px 4px 0; }   /* the professional site; the public one has the bar of links (.lk-bar) */
.people-compact .people-line { padding: 10px 0; border-bottom: 1px solid var(--line); }
.people-compact .people-line:last-child { border-bottom: 0; }
.people-compact h3 { margin: 0 0 6px; font-size: .95rem; }
.people-compact p { margin: 0; line-height: 1.7; }
.people-compact a { font-weight: 600; }
.people-compact summary { cursor: pointer; margin-top: 6px; color: var(--primary); font-size: .88rem; }
.people-compact details p { margin-top: 6px; }
.header-nav a.is-current { text-decoration: underline; text-underline-offset: 5px; }
.theme-countries { margin: 12px 0 0; padding-left: 18px; line-height: 1.9; }
@media (max-width: 720px) { .satellite-frame { height: 420px; } }

/* The picture the map waits behind.  It takes the same height as the frame at every width, so that nothing on the
   page moves when the one is swapped for the other. */
.map-facade { position: relative; display: block; width: 100%; height: 560px; border-radius: 12px; overflow: hidden;
  background: #e8edf5; cursor: pointer; }
.map-facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-open { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 11px 20px; border: 0;
  border-radius: 999px; background: rgba(255,255,255,.94); color: var(--text); font-weight: 800; font-size: .92rem;
  cursor: pointer; box-shadow: 0 6px 20px rgba(28,48,83,.28); }
.map-facade:hover .map-open { background: #fff; }
.map-credit { position: absolute; right: 8px; bottom: 6px; padding: 2px 7px; border-radius: 5px;
  background: rgba(255,255,255,.72); color: #334155; font-size: .66rem; line-height: 1.5; }
@media (max-width: 720px) { .map-facade { height: 420px; } }

/* the suggestions of the search box (2026-09-16) */
.header-search { position: relative; }
.suggest-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 2000; margin: 0; padding: 6px 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(28,48,83,.16); max-height: 70vh; overflow-y: auto; }
.suggest-list a { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; color: var(--text); }
.suggest-list strong { font-weight: 700; }
.suggest-list span { font-size: .82rem; color: var(--muted); }
.suggest-list li.is-active a, .suggest-list a:hover { background: var(--surface-soft); }

/* the guard (2026-09-16): the beacon is loaded but never seen */
.beacon { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; }

/* ------------------------------------------------------------------------------------------------------------------
   The new layout (2026-09-17, after the demo the user approved for the local site).  The header rules hold for both
   sites; everything under .is-public only for the public one - the professional pages keep their look.
   ------------------------------------------------------------------------------------------------------------------ */
.header-buttons { display: none; }
.icon-button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 1.35rem; cursor: pointer; }
.icon-button:hover, .icon-button[aria-expanded="true"] { background: var(--surface-soft); }
:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }
.header-row { min-height: 60px; }

@media (max-width: 760px) {
    .header-row { grid-template-columns: 1fr auto; gap: 8px; min-height: 56px; }
    .brand span:last-child { display: inline; }
    .header-buttons { display: flex; gap: 2px; justify-self: end; }
    .header-search, .header-nav { display: none; grid-column: 1 / -1; }
    .site-header.search-open .header-search { display: flex; grid-row: 2; padding-bottom: 10px; }
    .site-header.menu-open .header-nav { display: flex; grid-row: 2; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; white-space: normal; font-size: 1rem; justify-self: stretch; }
    .site-header.menu-open .header-nav a { padding: 12px 6px; border-top: 1px solid var(--line); }
}

/* the theme is switched above the map, so the header of an entity page does not repeat it */
.is-public:has(.theme-switch) .header-nav .nav-theme { display: none; }
@media (max-width: 760px) { .is-public:has(.theme-switch) .site-header.menu-open .header-nav .nav-theme { display: none; } }

.is-public { --container: 1440px; }
.is-public .entity-hero { padding: 14px 0 16px; }
.is-public .breadcrumbs { margin-bottom: 8px; gap: 2px 8px; font-size: .82rem; }
.is-public .page-title-row { align-items: flex-start; }
.is-public .page-title-row > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.is-public .page-title-row h1 { order: 1; margin: 0; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); text-wrap: balance; }
.is-public .badge-row { order: 2; margin: 0; }
.facts { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 4px 0 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.facts b { font-size: 1.05rem; }
.facts span { color: var(--muted); font-size: .85rem; }

.is-public .section.entity-layout { padding-top: 16px; padding-bottom: 36px; }
.is-public .entity-layout { grid-template-columns: minmax(0, 1fr) 332px; gap: 20px 24px; }
.is-public .section-block { margin-top: 20px; }
.is-public .panel { padding: 16px; }
.is-public .map-panel { padding: 10px; }
.is-public .map { height: clamp(300px, 58vh, 640px); }
.is-public .satellite-frame, .is-public .map-facade { height: clamp(320px, 62vh, 680px); }
.is-public .sticky-panel { top: 76px; }

.theme-switch { display: inline-flex; padding: 3px; margin-bottom: 10px; border-radius: 11px; background: #e6ecf6; }
.theme-switch a { min-height: 38px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 8px; font-weight: 700; color: var(--muted); }
.theme-switch a:hover { color: var(--primary); }
.theme-switch a.is-current { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(22,32,51,.18); }

.info-grid { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.info-grid > :only-child { grid-column: 1 / -1; }
.info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.info-card h2 { margin: 0; padding: 12px 16px 2px; font-size: 1rem; letter-spacing: -.01em; }
.info-card h2 small { margin-left: 6px; color: var(--muted); font-size: .78rem; font-weight: 500; }
.info-wide { grid-column: span 2; }
.info-rows { list-style: none; margin: 0; padding: 4px 8px 8px; display: grid; gap: 0 12px; }
.info-rows-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-rows li { min-width: 0; container-type: inline-size; }
.info-rows a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: 9px; color: var(--text); }
.info-rows a:hover { background: var(--surface-soft); color: var(--text); }
.info-rows a.is-self { font-weight: 800; color: var(--primary); }
.row-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.row-name small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }
.row-meta { flex: 0 0 auto; color: var(--muted); font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dir { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-soft); color: var(--primary); font-size: .8rem; }
.dir i { display: block; font-style: normal; line-height: 1; }
@container (max-width: 330px) { .dir-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.info-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 16px 14px; }
.info-chips a { min-height: 40px; padding: 8px 12px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-weight: 600; }
.info-chips a:hover { background: var(--surface-soft); }
.info-more { margin: 0; padding: 0 16px 8px; font-weight: 700; }
.info-more a { display: inline-flex; align-items: center; min-height: 40px; }

.map-pick { display: grid; gap: 6px; min-width: 150px; font-family: inherit; }
.map-pick a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 9px; background: var(--primary); color: #fff; font-weight: 700; }
.map-pick a:hover { background: var(--primary-dark); color: #fff; }
/* Leaflet's own stylesheet comes after ours and paints every link of the map its blue - on the blue button the word
   disappeared (the user, 2026-09-24).  Said once more, from inside the map, so that ours is the stronger rule. */
.leaflet-container .map-pick a, .leaflet-container .map-pick a:hover, .leaflet-container .map-pick a:visited { color: #fff; }

/* The room an advertisement takes, whether it is the dashed placeholder of this machine or the real block of
   the server.  The package swaps our <div> for Google's <ins>, so the shape has to belong to the classes that
   survive that swap - otherwise the advertisement arrives with no width, no margins and no order (2026-09-22).
   Since 2026-09-26 the server gets an empty <div class="hotel-pick pick-bottom"> that the guard fills (t.php):
   names an ad blocker does not hide, the same shape. */
.ad-slot, .ad-place-bottom, .pick-bottom {
  display: block; width: 100%; max-width: 970px; margin: 22px auto; min-height: 100px; }
/* and the dashes are the placeholder's alone: a real advertisement in a dashed box would look like a fault */
div.ad-slot { display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; padding: 8px;
  border: 1.5px dashed #d9a93a; border-radius: 12px; color: #7a5a10; font-size: .85rem;
  background: repeating-linear-gradient(135deg, #fff8e8 0 12px, #fff2d2 12px 24px); }
div.ad-slot b { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 1100px) {
    .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    /* one column: the map, then the data, then the rest - the numbers are not under ten rows of neighbours */
    .is-public .entity-layout { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
    .is-public .entity-content { display: contents; }
    .is-public .entity-content > * { order: 3; }
    .is-public .entity-content > .theme-switch { order: 0; align-self: flex-start; margin-bottom: 0; }
    .is-public .entity-content > .map-panel { order: 1; }
    .is-public .entity-sidebar { order: 2; }
    .is-public .section-block, .info-grid { margin-top: 0; }
}
@media (max-width: 700px) {
    .info-grid { grid-template-columns: minmax(0, 1fr); }
    .info-wide { grid-column: auto; }
    .info-rows-2 { grid-template-columns: minmax(0, 1fr); }
    .theme-switch { display: flex; align-self: stretch !important; }
    .theme-switch a { flex: 1; justify-content: center; }
    .ad-slot, .ad-place-bottom, .pick-bottom { min-height: 280px; }
    .is-public .map { height: clamp(280px, 48vh, 420px); }
    .is-public .panel { padding: 14px; }
}

/* dense lists and headings on the public pages (2026-09-17, the user: "много разход на пространство"): the child units
   in columns with rows of 44 px instead of one 100 px row across the page; small section headings; tight page bands */
.is-public .page-hero { padding: 14px 0 16px; }
.is-public .page-hero h1 { margin-bottom: 4px; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); }
.is-public .hero { padding: 28px 0 24px; }
.is-public .hero h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); margin-bottom: 8px; }
.is-public .section { padding-top: 16px; padding-bottom: 36px; }
.is-public .section-heading { align-items: baseline; justify-content: flex-start; gap: 10px; margin-bottom: 8px; }
.is-public .section-heading h2, .is-public .people-compact h2 { font-size: 1.1rem; letter-spacing: -.01em; }
.is-public .section-heading .eyebrow, .is-public .section-heading p.muted { display: none; }
.is-public .entity-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.is-public .entity-row { min-height: 44px; padding: 6px 12px; gap: 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); margin: 0 -1px -1px 0; }
.is-public .entity-row:last-child { border-bottom: 1px solid var(--line); }
.is-public .entity-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.is-public .entity-main strong { display: inline; font-weight: 600; overflow-wrap: break-word; }
.is-public .entity-main span { display: inline; margin: 0; font-size: .78rem; }
.is-public .entity-meta { flex-direction: row; align-items: center; gap: 8px; font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.is-public .entity-meta .arrow { display: none; }
.is-public .country-grid { gap: 12px; }
.is-public .country-card { padding: 14px 16px; }
.is-public .country-card-top { margin-bottom: 8px; }
.is-public .country-card h3 { margin-bottom: 10px; font-size: 1.1rem; }
.is-public .stats-grid { gap: 10px; margin-top: 16px; }
.is-public .stat { padding: 12px 14px; }
.is-public .stat strong { font-size: 1.25rem; }
/* the data panel follows the scroll: the column must be as tall as the content for "sticky" to have room to move */
.is-public .entity-sidebar { align-self: stretch; }
@media (max-width: 700px) { .ad-slot, .ad-place-bottom, .pick-bottom { min-height: 250px; } .is-public .satellite-frame, .is-public .map-facade { height: clamp(280px, 50vh, 440px); } }

/* ------------------------------------------------------------------------------------------------------------------
   Space (2026-09-17, the user: every row must earn its place): the name of the page in the header instead of the site
   name, a narrower search; one line of the path and the facts; the theme switch on the map, no "Карта" title and no
   frame; the data panel without what the header says, the external links in one row; the advertisement in the sidebar
   on a wide screen; the people in a card like the other blocks.
   ------------------------------------------------------------------------------------------------------------------ */
.brand-title { min-width: 0; gap: 10px; }
.brand-home { display: inline-flex; flex: none; }
.header-title { margin: 0; min-width: 0; font-size: clamp(1.15rem, .9rem + 1vw, 1.6rem); line-height: 1.15; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-badge { flex: none; font-size: .7rem; }
.is-public .header-row { grid-template-columns: minmax(0, 1fr) minmax(200px, 360px) auto; }
.is-public .hero-line { padding: 8px 0; }
.is-public .hero-line .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; }
.is-public .hero-line .breadcrumbs { margin: 0; }
.is-public .hero-line .facts { flex: 0 1 auto; margin: 0; order: 0; }
.is-public .section.entity-layout { padding-top: 12px; }

.is-public .map-panel { position: relative; padding: 0; overflow: hidden; }
.is-public .map, .is-public .satellite-frame, .is-public .map-facade { border-radius: 0; }
.theme-switch.on-map { position: absolute; top: 10px; right: 10px; z-index: 1000; margin: 0; box-shadow: 0 1px 4px rgba(22,32,51,.25); background: #e6ecf6; }
.theme-switch.on-map a { min-height: 32px; padding: 0 12px; font-size: .88rem; }

.is-public .sticky-panel { padding: 12px 14px; }
.is-public .details-list > div { padding: 5px 0; }
/* the bar of external links (the user picked it on 2026-09-17 out of six kinds): one frame, a part for every link,
   a line icon over a short name; the word above it says whose links they are ("Сопот в") */
.lk-title { margin: 12px 0 6px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Long cards rather than six narrow columns (the user, 2026-09-22): a column of six fits a syllable, a card fits
   the name.  They lay themselves out - as many to a row as the room allows, two in the sidebar, more under a wide
   map, one on a narrow phone - so nothing has to be said about where they are used. */
.lk-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; max-width: 420px; }
.lk-bar a { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: .76rem; font-weight: 600;
  line-height: 1.2; transition: background .15s, border-color .15s; }
.lk-bar a span { min-width: 0; }
/* Under a map as wide as the page the bar is not held to the width of a sidebar: the cards stand in one row where
   the room allows it and wrap only where it does not (the user, 2026-09-22). */
.lk-wide .lk-bar { max-width: none; }
.lk-bar svg { width: 17px; height: 17px; flex: none; color: var(--muted); transition: color .15s; }
.lk-mark { width: 18px; height: 18px; flex: none; object-fit: contain; }
.lk-bar a:hover { border-color: var(--primary); }
.lk-bar small { display: block; color: var(--muted); font-size: .92em; }   /* the language of the Wikipedia article */
.lk-bar a:hover { background: var(--surface-soft); }
.lk-bar a:hover svg { color: var(--primary); }
.is-public .details-list:empty { display: none; }

.ad-place-side, .pick-side { display: none; }
@media (min-width: 981px) {
    .is-public .ad-place-side, .is-public .pick-side { display: block; position: sticky; top: 76px; margin: 16px 0 0; min-height: 600px; max-width: 332px; }
    .is-public .entity-sidebar { display: flex; flex-direction: column; }
    .is-public .entity-sidebar .sticky-panel { position: static; }
}

@media (min-width: 701px) { .is-public .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.is-public .people-compact { margin-top: 16px; padding: 10px 16px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.is-public .people-compact .section-heading { margin-bottom: 2px; }

@media (max-width: 980px) {
    .is-public .entity-content > .map-panel { order: 0; }
    .is-public .entity-sidebar { order: 1; }
}
@media (max-width: 760px) {
    .is-public .header-row { grid-template-columns: minmax(0, 1fr) auto; }
    .header-title { font-size: 1.15rem; }
    .theme-switch.on-map { display: inline-flex; top: 8px; right: 8px; }
    .theme-switch.on-map a { flex: none; }
}

/* the satellite page: the paragraph of facts above the blocks and the line of sources under it (2026-09-19) */
.place-text { margin: 4px 4px 16px; }
.place-text p { margin: 0; line-height: 1.6; }
.place-text .sources { margin-top: 6px; color: var(--muted); font-size: .85rem; }
/* the other words for the same unit: read by whoever looks for them, quiet for everybody else */
.also-known { margin: 10px 4px 16px; color: var(--muted); font-size: .88rem; }
/* drawn close to the paragraph only where there is one; with nothing above it but the map the pull went under
   the map and cut the line in half (the user, 2026-09-24) */
.place-text + .also-known { margin-top: -8px; }

/* The menus of the header (2026-09-21): a button and a list of real links, not a <select>.  The list is in the
   HTML whether it is open or shut - that is the whole point, a crawler reads it and a reader can open a link in a
   new tab - and only the showing is done here. */
.nav-menu { position: relative; }
.nav-menu-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font: inherit;
    font-weight: 700; color: var(--primary); background: none; border: 1px solid var(--line); border-radius: 10px;
    cursor: pointer; }
.nav-menu-button:hover, .nav-menu-button[aria-expanded="true"] { background: var(--surface-soft); }
.nav-menu-list { display: none; position: absolute; right: 0; top: 100%; z-index: 2000; margin: 0;
    padding: 6px; min-width: 200px; max-height: 70vh; overflow-y: auto; list-style: none; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); font-weight: 600; }
/* Six pixels stood between the button and the list, and a mouse crossing them was over neither, so the menu shut
   on the way down to it and only a click would hold it open (the user, 2026-09-21).  A bridge drawn on the list
   itself does not help: the list has overflow-y for the long language list, and overflow clips whatever hangs
   outside it.  So the gap is gone instead - the list starts where the button ends - and .nav-menu carries a strip
   of its own beneath it while it is open, for the pixel the border sits on. */
.nav-menu:hover::after, .nav-menu:focus-within::after { content: ""; position: absolute; left: 0; right: 0;
    top: 100%; height: 10px; }
.nav-menu:hover .nav-menu-list, .nav-menu:focus-within .nav-menu-list,
.nav-menu-button[aria-expanded="true"] + .nav-menu-list { display: block; }
.nav-menu-list a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none;
    white-space: nowrap; }
.nav-menu-list a:hover, .nav-menu-list a:focus { background: var(--surface-soft); color: var(--primary); }
.nav-menu-list a[aria-current="true"] { color: var(--primary); }
.nav-menu-list small { color: var(--muted); }

/* The coordinates: a line under the bar of external links, not a card of their own (2026-09-21). */
.coords { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin: 10px 0 0;
    font-size: .82rem; color: var(--muted); }
/* the words on the left, the numbers and their button together on the right: the button stood apart from what
   it copies, at the far edge of the card (the user, 2026-09-24) */
.coords > span:first-child { margin-right: auto; }
.coords code + button.copy { margin-left: -5px; }
.coords button.copy { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s; }
.coords button.copy svg { width: 15px; height: 15px; }
.coords button.copy:hover { color: var(--primary); border-color: var(--primary); }
/* The answer to a press: the leaves of paper become a tick and a small word rises above the button, then both go
   away by themselves.  Nothing moves on the page - the word is drawn over what is there (the user: standard and
   discreet, 2026-09-22). */
.coords button.copy { position: relative; }
.coords button.copy .i-done { display: none; }
.coords button.copy.is-done .i-copy { display: none; }
.coords button.copy.is-done .i-done { display: block; }
.coords button.copy.is-done { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.coords button.copy.is-done::after {
  content: attr(data-done); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 7px; background: var(--text); color: #fff; font-size: .72rem; font-weight: 700;
  white-space: nowrap; pointer-events: none; animation: copied .25s ease-out; }
@keyframes copied { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } }
.coords code { padding: 3px 8px; background: var(--surface-soft); border-radius: 6px; color: var(--primary);
    font-size: .82rem; }

/* On a phone the map is what the reader opened the page for, and it began 519 pixels down of an 812-pixel screen
   (measured 2026-09-21): three stat cards stacked took 169 of them, the eyebrow and the padding most of the rest.
   The figures become one line of text - they are a footnote to the page, not its subject - and the eyebrow goes,
   since the two letters of the country code are in the breadcrumb above and the title below. */
@media (max-width: 640px) {
    .is-public .hero, .is-public .page-hero { padding: 14px 0 12px; }
    .is-public .hero .eyebrow, .is-public .page-hero .eyebrow { display: none; }
    .is-public .hero .lead, .is-public .page-hero .lead { margin: 6px 0 0; font-size: .92rem; }
    .is-public .stats-grid, .is-public .stats-grid.compact {
        display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
    .is-public .stats-grid .stat {
        display: flex; align-items: baseline; gap: 5px; padding: 0; background: none; border: 0; box-shadow: none; }
    .is-public .stats-grid .stat strong { display: inline; font-size: 1rem; }
    .is-public .stats-grid .stat span { color: var(--muted); font-size: .84rem; }
}

/* Atlas place pages: the horizontal unit belongs directly to the map, including on a phone. */
.is-public .entity-content > .map-panel + .ad-place-bottom,
.is-public .entity-content > .map-panel + .pick-bottom { margin-top: 12px; margin-bottom: 20px; }

/* Keep the map and its details at their existing width until there is room for outside rails. */
.is-public .atlas-rail { display: none; }
@media (min-width: 1600px) {
    .is-public .atlas-stage-with-rails {
        width: min(calc(100% - 36px), 1792px);
        margin-inline: auto;
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }
    .is-public .atlas-stage-with-rails > .entity-layout { width: 100%; margin: 0; min-width: 0; }
    .is-public .atlas-rail-left { display: block; }
    .is-public .atlas-rail { position: sticky; top: 76px; min-width: 0; }
    .is-public .atlas-rail .ad-place-side,
    .is-public .atlas-rail .pick-side {
        display: block; position: static; width: 160px; max-width: 160px;
        min-height: 600px; margin: 0;
    }
}
@media (min-width: 1820px) {
    .is-public .atlas-stage-with-rails { grid-template-columns: 160px minmax(0, 1fr) 160px; }
    .is-public .atlas-rail-right { display: block; }
}
@media (max-width: 980px) {
    .is-public .entity-content > * { order: 4; }
    .is-public .entity-content > .map-panel { order: 1; }
    .is-public .entity-content > .map-panel + .ad-place-bottom,
    .is-public .entity-content > .map-panel + .pick-bottom { order: 2; margin-top: 0; }
    .is-public .entity-sidebar { order: 3; }
    .is-public .entity-sidebar .ad-place-side,
    .is-public .entity-sidebar .pick-side { display: none; }
}

/* The country page: one line above the map instead of a band (2026-09-21).  The breadcrumb and the name sit on the
   same baseline, the name large and the path small before it, and the whole thing is as tall as the words in it. */
.is-public .page-hero { padding: 10px 0 8px; }
.is-public .page-hero .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.is-public .page-hero .breadcrumbs { margin: 0; }
.is-public .page-hero .page-title-row { flex: 1 1 auto; margin: 0; }
.is-public .page-hero .page-title-row h1 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); }