/* A shared weather overlay for every Engle Haven camera iframe. */
#camera-weather {
  position: absolute;
  z-index: 3;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  color: #fffaf1;
  font: 500 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}
#camera-weather[hidden], #camera-weather-details[hidden] { display: none !important; }
#camera-weather-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid rgba(233, 220, 193, .32);
  border-radius: 10px;
  background: rgba(18, 24, 24, .82);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#camera-weather-toggle:focus-visible {
  outline: 2px solid #f4d9a5;
  outline-offset: 3px;
}
#camera-weather-toggle:hover { background: rgba(18, 24, 24, .94); }
.camera-weather-reading { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.camera-weather-reading + .camera-weather-reading { border-left: 1px solid rgba(233, 220, 193, .35); padding-left: 12px; }
.camera-weather-reading svg { width: 17px; height: 17px; color: #e3c797; flex-shrink: 0; }
#camera-weather-temperature { font-size: 19px; font-weight: 600; }
#camera-weather-humidity { font-size: 16px; }
#camera-weather-details {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: min(270px, calc(100vw - 40px));
  padding: 10px 12px;
  border: 1px solid rgba(233, 220, 193, .3);
  border-radius: 8px;
  background: rgba(18, 24, 24, .96);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .2);
}
#camera-weather-details strong, #camera-weather-details span { display: block; }
#camera-weather-details span { color: #e0ddd5; }
@media (max-width: 600px) {
  #camera-weather { top: max(24px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
  #camera-weather-toggle { gap: 8px; padding: 6px 10px; border-radius: 8px; }
  .camera-weather-reading + .camera-weather-reading { padding-left: 8px; }
  #camera-weather-temperature { font-size: 17px; }
  #camera-weather-humidity { font-size: 14px; }
  .camera-weather-reading svg { width: 15px; height: 15px; }
}