:root {
  --accent: #ff4d5a;
  --accent-dark: #e63946;
  --bg: #ffffff;
  --bg-soft: #fff7f4;
  --ink: #2b2d33;
  --ink-soft: #6b7280;
  --line: #f0e4e0;
  --shadow: 0 8px 28px rgba(43, 45, 51, 0.14);
  --radius: 14px;
  --sidebar-w: 360px;
  /* Mobile bottom sheet (see mobile.css + wireBottomSheet in controls.js) */
  --sheet-h: 100dvh;    /* expanded sheet fills the screen, all the way to the top */
  /* collapsed: just the grab tab peeks. Includes the iOS home-indicator inset so
     the tab floats above it (otherwise grabbing it triggers the home gesture). */
  --sheet-peek: calc(46px + env(safe-area-inset-bottom));
}

* { box-sizing: border-box; touch-action: manipulation; }

/* Let Leaflet own every touch gesture inside the map — pan, pinch, AND double-tap
   zoom. Without this the global `touch-action: manipulation` above lands on the
   tiles/panes (the real touch targets) and suppresses double-tap-to-zoom. */
.leaflet-container, .leaflet-container * { touch-action: none; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;   /* no rubber-band bounce that drags the bottom UI around */
  /* Noto Color Emoji supplies flag glyphs, which Windows system fonts lack */
  font-family: "Nunito", system-ui, -apple-system, "Noto Color Emoji", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

#app {
  display: flex;
  height: 100%;     /* fallback */
  height: 100dvh;   /* dynamic viewport — tracks iOS Safari's toolbars so the
                       bottom controls aren't hidden behind them */
}