/* ── Floating day/night capsule (top-left of map) ── */
#ddnFloat {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 500;
}

.ddnToggle {
  position: relative;
  width: 54px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid rgba(30, 30, 40, .14);
  background: #fff;
  cursor: pointer;
  padding: 3px;
  overflow: hidden;
  transition: background 380ms, border-color 380ms, box-shadow 380ms;
  /* Day: subtle drop shadow */
  box-shadow: 0 2px 8px rgba(30, 30, 40, .18), 0 1px 3px rgba(30, 30, 40, .10);
}

.ddnToggle[aria-checked="true"] {
  background: #1a1a22;
  border-color: rgba(245, 207, 107, .55);
  box-shadow: 0 0 0 2px rgba(245, 183, 40, .22), 0 0 10px rgba(245, 183, 40, .28), 0 0 22px rgba(245, 183, 40, .13);
}

.ddnThumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(30, 30, 40, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: left 420ms cubic-bezier(.4, 0, .2, 1), background 320ms, border-color 320ms;
}

.ddnToggle[aria-checked="true"] .ddnThumb {
  left: calc(100% - 23px);
  background: transparent;
  border-color: rgba(245, 207, 107, .55);
  color: rgba(245, 207, 107, .95);
}

.ddnIconSun,
.ddnIconMoon {
  position: absolute;
  width: 11px;
  height: 11px;
  transition: opacity 260ms
}

.ddnIconMoon {
  opacity: 0
}

.ddnToggle[aria-checked="true"] .ddnIconSun {
  opacity: 0
}

.ddnToggle[aria-checked="true"] .ddnIconMoon {
  opacity: 1
}

/* ── Linkage on/off toggle (placed directly above the day/night capsule) ── */
.linkToggle {
  margin-bottom: 8px;
  background: #fff;
}

.linkToggle[aria-checked="true"] {
  background: #2b83ba;
  border-color: rgba(43, 131, 186, .55);
  box-shadow: 0 0 0 2px rgba(43, 131, 186, .18), 0 0 10px rgba(43, 131, 186, .22);
}

.linkThumb {
  background: #fff;
  border: 1px solid rgba(30, 30, 40, .14);
}

.linkToggle[aria-checked="true"] .linkThumb {
  background: #fff;
  border-color: rgba(43, 131, 186, .55);
}

/* ── Grid/Vitality on/off toggle (placed directly above the Linkage capsule) ── */
.gridToggle {
  margin-bottom: 8px;
  background: #fff;
}

.gridToggle[aria-checked="true"] {
  background: #e85b3b;
  border-color: rgba(232, 91, 59, .55);
  box-shadow: 0 0 0 2px rgba(232, 91, 59, .18), 0 0 10px rgba(232, 91, 59, .22);
}

.gridThumb {
  background: #fff;
  border: 1px solid rgba(30, 30, 40, .14);
}

.gridToggle[aria-checked="true"] .gridThumb {
  background: #fff;
  border-color: rgba(232, 91, 59, .55);
}

/* ── Vitality opacity slider (session-only, lives inside the Legend card) ── */
.dOpacityRow {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(30, 30, 40, .09);
}

.dOpacityLabel {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(30, 30, 40, .55);
  margin-bottom: 6px;
}

.dOpacitySlider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(30, 30, 40, .14);
  outline: none;
  cursor: pointer;
}

.dOpacitySlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e85b3b;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(30, 30, 40, .3);
  cursor: pointer;
}

.dOpacitySlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e85b3b;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(30, 30, 40, .3);
  cursor: pointer;
}

.dOpacityVal {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  color: rgba(30, 30, 40, .62);
  min-width: 30px;
  text-align: right;
}