/**
 * SatView — Map Rotation styles
 */

/* ── Dark background fills rotated corners ─────────────────────── */
.app-map {
  background: #1A1F24;
}

/* ── Smooth rotation transition on the wrapper ──────────────────── */
#mapRotateWrapper {
  transition: transform 0.06s linear;
}

/* ── Compass widget ─────────────────────────────────────────────── */
/*                                                                   */
/*  All three use position:fixed → same viewport reference.          */
/*  Right-edge column layout (bottom → top):                        */
/*    Leaflet zoom ±  :  right:10px,  ~10 –  78px                  */
/*    #mapCompass      :  right:10px,  90 – 130px  (this block)     */
/*    #sv-heatmap-fab  :  right:10px, 195 – 235px  (set in JS)     */
/*                                                                   */
#mapCompass {
  position: fixed;
  bottom: 90px; /* overridden by JS at runtime */
  right: 10px;
  width: 40px;
  height: 40px;
  background: rgba(26, 31, 36, 0.88);
  border: 1px solid rgba(79, 168, 201, 0.25);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s;
  user-select: none;
}
#mapCompass:hover {
  border-color: rgba(79, 168, 201, 0.7);
}
#mapCompass.rotated {
  border-color: rgba(245, 158, 11, 0.65);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

/* Needle — rotates opposite to map so N always points up */
.mrc-needle {
  position: absolute;
  width: 6px;
  height: 24px;
  transition: transform 0.08s linear;
}
.mrc-n {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left:   3px solid transparent;
  border-right:  3px solid transparent;
  border-bottom: 12px solid #EF4444;
}
.mrc-s {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  border-top:   12px solid #4B5563;
}
.mrc-label-n {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  color: #9CA3AF;
  line-height: 1;
  pointer-events: none;
}
#mapCompass.rotated .mrc-label-n {
  color: #F59E0B;
}