html,body{height:100%;margin:0}
html,body{font-family:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:root{
  --accent:#B54633;
  --accent-soft:rgba(181,70,51,.10);
  --focus-ring:rgba(181,70,51,.35);
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-serif:"IBM Plex Serif",Georgia,serif;
  --maps-sidebar-width:320px;
  --maps-intro-duration:700ms;
  --maps-intro-delay:0ms;
  --maps-intro-start-left:max(1rem, calc((100vw - min(calc(100vw - 2rem), 88rem)) / 2));
  --maps-intro-start-top:2rem;
  --maps-intro-start-width:clamp(10rem, 12vw, 11.75rem);
  --maps-logo-width:clamp(10rem, 12vw, 11.75rem);
  --maps-logo-shift-left:1.0rem;
  --maps-logo-target-left:calc((var(--maps-sidebar-width) - var(--maps-logo-width)) / 2 - var(--maps-logo-shift-left));
  --maps-logo-top:2.0rem;
}
.app{display:grid; grid-template-columns:var(--maps-sidebar-width) 1fr; height:100%; position:relative; isolation:isolate}
.map-intro{
  position:fixed;
  inset:0 auto 0 0;
  width:100vw;
  background:#fff;
  z-index:12;
  overflow:hidden;
  pointer-events:none;
  transition:
    width var(--maps-intro-duration) cubic-bezier(.2,.8,.2,1) var(--maps-intro-delay),
    opacity 220ms ease;
}
.map-intro__logo{
  position:absolute;
  left:var(--maps-intro-start-left);
  top:var(--maps-intro-start-top);
  width:var(--maps-intro-start-width);
  height:auto;
  display:block;
  transition:
    left var(--maps-intro-duration) cubic-bezier(.2,.8,.2,1) var(--maps-intro-delay),
    top var(--maps-intro-duration) cubic-bezier(.2,.8,.2,1) var(--maps-intro-delay),
    width var(--maps-intro-duration) cubic-bezier(.2,.8,.2,1) var(--maps-intro-delay);
}
.maps-page.is-intro-active .map-intro{width:var(--maps-sidebar-width)}
.maps-page.is-intro-active .map-intro__logo{
  left:var(--maps-logo-target-left);
  top:var(--maps-logo-top);
  width:var(--maps-logo-width);
}
.maps-page.is-intro-complete .map-intro{opacity:0}
.sidebar{display:flex; flex-direction:column; background:#fff; border-right:1px solid #EFDBD7; font:14px/1.45 "IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.sidebar-body{overflow:auto; padding-top:var(--maps-logo-top); padding-bottom:12px; padding-inline:16px;}
.sidebar-footer{margin-top:auto; border-top:1px solid #EFDBD7; padding-block:12px; padding-inline:16px;}
.sidebar-logo{display:flex; width:var(--maps-logo-width); margin:0 auto 30px; transform:translateX(calc(var(--maps-logo-shift-left) * -1)); transition:transform .16s ease, opacity .18s ease; opacity:1}
.sidebar-logo:hover,
.sidebar-logo:focus-visible{transform:translateX(calc(var(--maps-logo-shift-left) * -1)) scale(.96)}
.sidebar-logo img{display:block; width:100%; height:auto}
.group{margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid #EFDBD7}
.group h3{margin:6px 0 10px; font-size:14px; font-weight:500; letter-spacing:.08em; text-transform:uppercase}
.toggle{display:flex; align-items:center; gap:0; margin:4px 0; cursor:pointer; transform-origin:left center; transition:transform .16s ease}
.toggle:hover,
.toggle:focus-within{transform:scale(1.035)}
.small{font-size:12px; color:#555; font-family:"IBM Plex Serif",Georgia,serif}
code{background:#f6f6f6; border:1px solid #eee; padding:0 4px; border-radius:4px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.chip{padding:4px 8px; border:1px solid #ddd; border-radius:999px; cursor:pointer; background:#fff; font-family:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.chip.active{background: var(--accent-soft); border-color: var(--accent)}
.btn{display:inline-block; padding:6px 10px; border-radius:8px; border:1px solid #ddd; cursor:pointer; background:#fff; font-family:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.btn{ transition: box-shadow .15s ease, transform .05s ease; }
.btn:hover{ box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline: none; }
.btn:focus-visible{ box-shadow: 0 0 0 3px var(--focus-ring); }
.map-wrap{position:relative;}
#map{position:absolute; inset:0;}
.lang-row{display:flex; gap:14px; margin-top:8px}
.lang-row label{display:flex; gap:6px; align-items:center; cursor:pointer}
.muted,.warn,#country-hint,#cityHint,#no-data,#no-poi{font-family:var(--font-serif); line-height:1.35}
#countryTitleLabel,#cityTitle{font-family:var(--font-sans); font-weight:500; letter-spacing:-.01em}
.sidebar input[type="checkbox"], .sidebar input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.toggle span{ display:block; padding:6px 2px; padding-inline-start:8px; font-size:14px; font-weight:500; color:#2f2624; opacity:1; transform:translateY(0) scale(1);
  transition: transform .22s ease, font-size .22s ease, color .22s ease, opacity .22s ease; }
.toggle:has(input:checked) span{ color:var(--accent); font-weight:700; font-size:16px; opacity:1; transform:translateY(0) scale(1.08); }
.group:has(.toggle:has(input:checked)) .toggle:not(:has(input:checked)) span{ color:#2f2624; opacity:.68; font-size:13.5px; transform:translateY(0) scale(.95); }
.group .toggle:has(~ .toggle input:checked):not(:has(input:checked)) span{ transform:translateY(-4px) scale(.95); }
.group .toggle:has(input:checked) ~ .toggle span{ transform:translateY(6px) scale(.95); }
.toggle:hover span{ opacity:.9 }
.toggle span:focus, .toggle span:focus-visible{ outline:none }
.lang-row label{ border:none; background:transparent; padding:4px 2px; font-weight:500; color:#2f2624; opacity:1; transform:translateX(0) scale(1);
  transition: transform .22s ease, font-size .22s ease, color .22s ease, opacity .22s ease; }
.lang-row:has(input:checked) label{ opacity:.68; transform:translateX(-6px) scale(.95); }
.lang-row label:has(input:checked){ color:var(--accent); font-weight:700; font-size:16px; opacity:1; transform:translateX(0) scale(1.08); }
.lang-row label:has(input:checked) ~ label{ transform:translateX(8px) scale(.95); }
.lang-row label:focus, .lang-row label:focus-visible{ outline:none }
.maplibregl-popup-content{font:14px/1.45 var(--font-sans)}
.maplibregl-popup-content b{font-weight:500}
.maplibregl-popup-content br+*{font-family:var(--font-serif)}

.maps-page.is-intro-pending .sidebar-logo,
.maps-page.is-intro-active .sidebar-logo{
  opacity:0;
}

.maps-page .group > *,
.maps-page .sidebar-footer{
  opacity:1;
  transform:translateY(0);
}

.maps-page.is-intro-pending .group > *,
.maps-page.is-intro-pending .sidebar-footer,
.maps-page.is-intro-active .group > *,
.maps-page.is-intro-active .sidebar-footer{
  opacity:0;
  transform:translateY(18px);
}

.maps-page.is-intro-complete .group > *,
.maps-page.is-intro-complete .sidebar-footer{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity 420ms ease,
    transform 420ms cubic-bezier(.22,1,.36,1);
}

.maps-page.is-intro-complete .group h3{transition-delay:40ms}
.maps-page.is-intro-complete .group .toggle:nth-of-type(1){transition-delay:120ms}
.maps-page.is-intro-complete .group .toggle:nth-of-type(2){transition-delay:200ms}
.maps-page.is-intro-complete .group .toggle:nth-of-type(3){transition-delay:280ms}
.maps-page.is-intro-complete .group .toggle:nth-of-type(4){transition-delay:360ms}
.maps-page.is-intro-complete .sidebar-footer{transition-delay:460ms}

@media (prefers-reduced-motion: reduce){
  .map-intro,
  .map-intro__logo,
  .sidebar-logo,
  .maps-page.is-intro-complete .group > *,
  .maps-page.is-intro-complete .sidebar-footer{
    transition:none;
  }
}