@import "tailwindcss";
@import "mapbox-gl/dist/mapbox-gl.css";

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0a0a0a;
  color: #ededed;
}

/* Ensure Mapbox canvas fills its container */
.mapboxgl-map {
  font-family: inherit;
}

/* Attribution text colour.
   Mapbox colours the attribution's LINKS (#000000bf) but not its plain text,
   so the plain text inherited the near-white body colour above (#ededed) and
   sat almost invisible on the attribution's white background. That is how the
   "Palestine boundary © UN OCHA FISS" credit -- and the OpenStreetMap wording
   before it -- came out washed out while "CC BY 3.0 IGO" and "Boundary
   licence details" stayed dark (Bill's photo and Andrew's screenshot, 13 Sep).
   A CC BY credit has to be legible, so the text now matches the links. */
.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-attrib-inner {
  color: rgba(0, 0, 0, 0.75);
}

/* Dim the map behind the welcome dialog. Tailwind's reset clears ::backdrop
   along with everything else, so the shade has to be asked for by name. */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* Cursor states driven by data-cursor-state on the map container. CSS
   !important wins over the inline `style.cursor` Mapbox/terra-draw set on
   hover -- which is necessary to keep the cursor coherent across the whole
   surface (fill layers, line layers, blank canvas) within one mode.
     idle    -> open hand   (in draw mode, no stroke active)
     drawing -> pointer     (index finger, while a stroke is in progress)
     beat    -> open hand   (~1 s after a polygon finishes)
     select  -> default     (browser handles hover; pointer over interactive layers)
*/
[data-cursor-state="idle"] .mapboxgl-canvas-container,
[data-cursor-state="idle"] .mapboxgl-canvas,
[data-cursor-state="beat"] .mapboxgl-canvas-container,
[data-cursor-state="beat"] .mapboxgl-canvas {
  cursor: grab !important;
}

[data-cursor-state="idle"] .mapboxgl-canvas:active,
[data-cursor-state="beat"] .mapboxgl-canvas:active {
  cursor: grabbing !important;
}

[data-cursor-state="drawing"] .mapboxgl-canvas-container,
[data-cursor-state="drawing"] .mapboxgl-canvas {
  cursor: pointer !important;
}

/* B3: prevent terra-draw's 4-arrows "move" cursor from sticking in Select
   mode after a vertex-drag ends. When NOT actively holding the mouse button
   (no :active state), the default cursor takes precedence even over
   terra-draw's inline style; when actively dragging, the browser's
   grabbing/move cursor is fine. */
[data-cursor-state="select"] .mapboxgl-canvas-container:not(:active),
[data-cursor-state="select"] .mapboxgl-canvas:not(:active) {
  cursor: default !important;
}