/* Everything layout/color-related lives in Tailwind utility classes on the
   elements themselves (see index.html / app.js / map.js). This file only
   holds the handful of things Tailwind utilities can't reach: third-party
   widget internals (MapLibre controls) and a couple of native form
   controls that need pseudo-element styling. */

html { color-scheme: light; }
html.dark { color-scheme: dark; }

/* MapLibre's own control chrome is drawn light-only; darken it to match. */
html.dark .maplibregl-ctrl-group {
  background: #262626;
  border-color: #404040;
}
html.dark .maplibregl-ctrl-group button {
  background: transparent;
}
html.dark .maplibregl-ctrl-group button + button {
  border-top-color: #404040;
}
html.dark .maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); }
html.dark .maplibregl-ctrl-attrib { background: rgba(23, 23, 23, 0.7); }
html.dark .maplibregl-ctrl-attrib a { color: #d4d4d4; }

/* Drawer scrollbar, webkit browsers */
#insights-drawer::-webkit-scrollbar { width: 8px; }
#insights-drawer::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.35);
  border-radius: 999px;
}