/* Sky themes: the page background follows the weather and time of day */
body { background: var(--sky); background-attachment: fixed; transition: background 0.8s ease; }
body[data-theme="day-clear"]   { --sky: linear-gradient(160deg, #0b5d6b 0%, #14898f 50%, #3fbfa6 100%); }
body[data-theme="day-cloudy"]  { --sky: linear-gradient(160deg, #34395f 0%, #5b6296 55%, #8f97c4 100%); }
body[data-theme="day-rain"]    { --sky: linear-gradient(160deg, #16303f 0%, #24596a 55%, #3f8a94 100%); }
body[data-theme="night-clear"] { --sky: linear-gradient(160deg, #150c35 0%, #351c72 55%, #6a3fae 100%); }
body[data-theme="night-cloudy"]{ --sky: linear-gradient(160deg, #14152b 0%, #2c2f58 60%, #4c5088 100%); }
body[data-theme="fog"]         { --sky: linear-gradient(160deg, #4d5a63 0%, #7f8f96 60%, #b0bcc0 100%); }

/* Frosted-glass panels */
.glass {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.chip { transition: background 0.2s; }
.chip:hover, .chip.active { background: rgba(255, 255, 255, 0.32); }
#hourly::-webkit-scrollbar { height: 6px; }
#hourly::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }