.garden-weather {
  box-sizing: border-box; width: min(1280px, calc(100% - 32px)); margin: 18px auto 0;
  padding: 19px 24px 14px; color: #233e36; background: #eef3e9;
  border: 1px solid #cbd7c3; border-radius: 18px; font-family: inherit;
}
.garden-weather *, .garden-weather *::before, .garden-weather *::after { box-sizing: border-box; }
.garden-weather [hidden] { display: none !important; }
.weather-topline, .weather-bottomline, .weather-readings { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.garden-weather .weather-eyebrow { margin: 0 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: #4e6758; }
.garden-weather h2 { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.3; }
.garden-weather .weather-status { margin: 0; font-size: 12px; color: #526556; text-align: right; }
.garden-weather.weather-stale .weather-status { color: #805100; font-weight: 650; }
.weather-readings { padding: 16px 0; }
.weather-primary { display: flex; gap: 14px; align-items: center; }
#weather-icon { font-size: 34px; color: #957125; line-height: 1; }
#weather-temperature { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; font-weight: 550; letter-spacing: -.045em; white-space: nowrap; }
#weather-condition { display: block; font-size: 14px; }
#weather-feels { display: block; color: #53685d; margin-top: 4px; font-size: 12px; }
.weather-metrics { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; }
.weather-metrics dt { font-size: 11px; color: #526556; margin-bottom: 6px; }
.weather-metrics dd { margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; }
.weather-bottomline { border-top: 1px solid #cedbc7; padding-top: 10px; }
.weather-bottomline p { margin: 0; color: #526556; font-size: 11px; line-height: 1.5; }
.garden-weather a { color: inherit; text-underline-offset: 3px; }
.garden-weather button { border: 1px solid #718574; border-radius: 6px; padding: 7px 12px; color: #233e36; background: white; font: inherit; font-size: 12px; cursor: pointer; }
.garden-weather details { margin-top: 10px; border-top: 1px solid #cedbc7; padding-top: 8px; }
.garden-weather summary { padding: 4px 0; width: fit-content; cursor: pointer; font-size: 12px; font-weight: 650; }
.garden-weather :focus-visible { outline: 2px solid #315d42; outline-offset: 4px; }
.weather-history-note { font-size: 11px; color: #526556; }
.weather-table-wrap { max-height: 240px; overflow: auto; }
.garden-weather table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.garden-weather th, .garden-weather td { padding: 9px 12px; text-align: right; border-bottom: 1px solid #d8e2d1; }
.garden-weather th:first-child, .garden-weather td:first-child { text-align: left; }
.garden-weather th { position: sticky; top: 0; background: #eef3e9; }
.weather-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 700px) {
  .garden-weather { padding: 16px; }
  .weather-topline { align-items: flex-start; gap: 12px; }
  .weather-status { max-width: 145px; line-height: 1.5; }
  .weather-readings { flex-direction: column; align-items: stretch; gap: 20px; }
  .weather-primary { gap: 12px; }
  .weather-metrics { gap: 12px; justify-content: space-between; }
  .weather-metrics dt { font-size: 10px; }
  .weather-metrics dd { font-size: 15px; }
  #weather-temperature { font-size: 38px; }
}
@media (prefers-color-scheme: dark) {
  /* The current garden design uses a light palette; retain deliberate contrast. */
  .garden-weather { color-scheme: light; }
}