/* ============================================================
   RiverSync DS v2 — MAP layer
   Tokens + structural CSS for the branded vector map kit
   (components/map/). Imported by styles.css.

   The map is deliberately NOT a tile-server look (no Google /
   Mapbox beige-and-yellow). It renders the DS's own simplified
   land geometry on a calm blue-grey canvas; dark theme reads
   as an ops-room "blueprint".
   ============================================================ */

:root {
  /* canvas */
  --map-water:        #F2F6F9;   /* sits between --bg and --surface-2  */
  --map-land:         #DCE5EC;   /* blue-tinted, calmer than gray-30   */
  --map-coast:        #C2CFDA;   /* hairline coastline                 */
  --map-graticule:    rgba(54,121,172,0.10);  /* faint brand-blue grid */
  --map-frame:        var(--border);

  /* markers (semantic, theme-aware via app-ui tokens) */
  --map-pin-ok:       var(--success);
  --map-pin-warning:  var(--warning);
  --map-pin-danger:   var(--danger);
  --map-pin-idle:     var(--fg3);
  --map-pin-accent:   var(--accent);
  --map-pin-stroke:   var(--surface);   /* keyline so pins pop off land */

  /* selection + labels */
  --map-select-ring:  var(--ring);
  --map-label:        var(--fg2);
}
[data-theme="dark"] {
  /* "blueprint" ops canvas — deeper than --surface so it reads as depth */
  --map-water:        #0C141B;
  --map-land:         #1D2B38;
  --map-coast:        #34495C;
  --map-graticule:    rgba(90,155,208,0.10);
  --map-pin-stroke:   #0C141B;
}

/* ---------- Frame ---------- */
.rs-map{
  position:relative;
  background:var(--map-water);
  border:1px solid var(--map-frame);
  border-radius:var(--r-md, 4px);
  overflow:hidden;
}
.rs-map svg{ display:block; width:100%; height:100%; }
.rs-map--bare{ border:0; border-radius:0; }   /* flush inside a card body */

.rs-map__canvas{ cursor:grab; touch-action:none; }
.rs-map__canvas.is-panning{ cursor:grabbing; }
.rs-map__canvas:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--ring); }

/* land */
.rs-map__land{
  fill:var(--map-land);
  stroke:var(--map-coast);
  stroke-width:1;
  transition:fill .25s ease, stroke .25s ease;
}
.rs-map__graticule{
  stroke:var(--map-graticule); stroke-width:1; fill:none;
}

/* ---------- Markers — diamond pin, the RiverSync signature ---------- */
.rs-map__pin{ cursor:pointer; }
.rs-map__pin .core{
  stroke:var(--map-pin-stroke); stroke-width:1.5;
  transition:transform .15s var(--rs-ease, ease);
}
.rs-map__pin:hover .core{ transform:scale(1.35); }
.rs-map__pin.is-selected .core{ transform:scale(1.35); }
.rs-map__pin .halo{ fill:none; opacity:0; }
.rs-map__pin.is-selected .halo{
  opacity:1; stroke:var(--map-select-ring); stroke-width:5;
}
.rs-map__pin .ping{
  fill:none; stroke-width:1.5; opacity:0;
  transform-origin:center; transform-box:fill-box;
}
@media (prefers-reduced-motion: no-preference){
  .rs-map__pin.is-pulse .ping{
    animation:rs-map-ping 2.2s var(--rs-ease-out, ease-out) infinite;
  }
}
@keyframes rs-map-ping{
  0%   { opacity:.9; transform:scale(.4); }
  70%  { opacity:0;  transform:scale(2.6); }
  100% { opacity:0;  transform:scale(2.6); }
}

/* ---------- Zoom controls ---------- */
.rs-map__ctls{
  position:absolute; right:10px; bottom:10px; z-index:3;
  display:flex; flex-direction:column; gap:0;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-md, 4px); box-shadow:var(--shadow);
  overflow:hidden;
}
.rs-map__ctl{
  width:26px; height:26px; display:grid; place-items:center;
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  color:var(--fg2); font:inherit;
}
.rs-map__ctl + .rs-map__ctl{ border-top:1px solid var(--border); }
.rs-map__ctl:hover{ background:var(--surface-2); color:var(--fg); }
.rs-map__ctl:active{ background:var(--surface-3); }
.rs-map__ctl:disabled{ color:var(--fg3); opacity:.45; cursor:default; background:none; }
.rs-map__ctl svg{ width:13px; height:13px; }
.rs-map__ctl:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--ring); }

/* ---------- Tooltip (matches .rs-chart__tip idiom) ---------- */
.rs-map__tip{
  position:absolute; z-index:4; pointer-events:none;
  background:var(--chart-tip-bg, var(--surface));
  border:1px solid var(--chart-tip-border, var(--border-strong));
  border-radius:var(--r-md, 4px); box-shadow:var(--shadow-lg);
  padding:7px 10px; max-width:230px;
  font-size:11.5px; line-height:1.45; color:var(--fg);
}
.rs-map__tip b{ font-weight:600; font-size:12px; display:flex; align-items:center; gap:6px; }
.rs-map__tip .sw{
  width:7px; height:7px; flex:none; transform:rotate(45deg);
  outline:1px solid var(--map-pin-stroke);
}
.rs-map__tip .sub{ color:var(--fg2); margin-top:2px; }
.rs-map__tip .geo{
  color:var(--fg3); font-family:var(--rs-font-mono); font-size:10px; margin-top:3px;
}

/* ---------- Attribution / scale chip ---------- */
.rs-map__chip{
  position:absolute; left:10px; bottom:10px; z-index:3;
  font-family:var(--rs-font-mono); font-size:9.5px; letter-spacing:.04em;
  color:var(--fg3); background:color-mix(in srgb, var(--map-water) 72%, transparent);
  padding:2px 6px; border-radius:2px; pointer-events:none; white-space:nowrap;
}