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

/* Cesium Ion's terms require the credit/attribution display to stay visible --
   do not hide .cesium-viewer-bottom. Restyle only, never display:none it. */
.cesium-viewer-bottom {
  font-size: 10px;
  opacity: 0.85;
}

[x-cloak] {
  display: none !important;
}

/* Dual-handle rescale slider (OpenSSDM seabed overlay panel) -- two native
   <input type=range> stacked in .rctrl-dual-range, ported from OpenSSDM's
   own map viewer (frontend/templates/map/review.html): each input is
   pointer-events:none except its own thumb, so both tracks overlay as one
   visual bar while each thumb stays independently draggable. Colors
   adapted to this app's dark panel theme (base.html's Tailwind `brand`
   color, #0ea5e9, for the thumb -- same hex OpenSSDM happens to use). */
.rctrl-dual-range { position: relative; height: 1.5rem; }
.rctrl-dual-range input[type=range] {
  position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%);
  pointer-events: none; appearance: none; -webkit-appearance: none;
  background: transparent; height: 4px; margin: 0; padding: 0;
}
.rctrl-dual-range input[type=range]::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: #0ea5e9; cursor: pointer;
  border: 2px solid #1e293b; box-shadow: 0 0 0 1px #64748b;
}
.rctrl-dual-range input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 13px; height: 13px; border-radius: 50%;
  background: #0ea5e9; cursor: pointer;
  border: 2px solid #1e293b; box-shadow: 0 0 0 1px #64748b;
}
.rctrl-dual-range input[type=range]::-webkit-slider-runnable-track {
  /* -webkit-appearance:none on the track pseudo-element itself, not just
     the input -- without this, Chrome/Edge still render their own native
     "filled (accent-colored) before the thumb, plain after" behavior
     underneath this background, producing a visible blue/grey/blue break
     at each thumb instead of one flat bar. */
  -webkit-appearance: none;
  height: 4px; background: #475569; border-radius: 2px;
}
.rctrl-dual-range input[type=range]::-moz-range-track {
  height: 4px; background: #475569; border-radius: 2px;
}
/* Firefox's default focus outline/border also breaks the flat-bar look. */
.rctrl-dual-range input[type=range]::-moz-focus-outer {
  border: 0;
}

/* EMODnet Human Activities feature callout (viewer.js's
   showEmodnetHaCallout/updateEmodnetHaCalloutPosition) -- world-anchored,
   positioned above-left of the clicked point by JS each frame. This
   triangle is the visual "connects to that feature" cue the callout
   exists for (replacing Cesium's own unanchored default infoBox). Fixed
   at the card's bottom-center regardless of on-screen clamping -- see
   CLAUDE.md for why an imperfect pointer aim near a screen edge is an
   accepted simplification, not a bug. */
.emodnet-callout::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: rgba(15, 23, 42, 0.95); /* matches bg-slate-900/95 */
}