.weather-section { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: transparent; color: var(--journal-primary); }
.weather-heading h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.weather-switch { display: inline-flex; flex: none; min-width: 0; }
.weather-switch > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.weather-switch select { max-width: 100%; border: 0; padding: 0 1rem 0 0; appearance: none; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.weather-switch { position: relative; }
.weather-switch::after { content: ""; position: absolute; right: .28rem; top: 50%; width: .3rem; height: .3rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.weather-switch select:focus-visible, .weather-days:focus-visible { outline: 2px solid var(--journal-primary); outline-offset: 2px; }
.weather-city[hidden] { display: none; }
.weather-now { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "icon temp highlow" "icon place place"; align-items: center; column-gap: 12px; min-width: 0; }
.weather-now .weather-icon { grid-area: icon; width: 40px; height: 40px; }
.weather-measurement { grid-area: temp; min-width: 0; }
.weather-temperature { font-family: var(--serif); font-size: 34px; letter-spacing: -.01em; line-height: 1.05; font-weight: 900; }
.weather-place { grid-area: place; display: flex; align-items: baseline; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; line-height: 1.4; color: var(--muted); }
.weather-place [aria-hidden] { padding: 0 .2rem; }
.weather-condition { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.weather-high-low { grid-area: highlow; text-align: right; color: var(--muted); font-size: 13px; line-height: 1.4; white-space: nowrap; }
.weather-humidity { display: block; }
.weather-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; min-width: 0; margin-top: 7px; }
.weather-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 1px 0; border-radius: 6px; background: var(--paper, #f5f5f5); text-align: center; }
.weather-day-name { color: var(--muted); font-size: 11px; line-height: 1.2; text-transform: uppercase; }
.weather-day-range { font-family: var(--serif); font-weight: 700; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.weather-day .weather-icon { width: 15px; height: 15px; }
.weather-icon { display: block; overflow: visible; }
.weather-icon path, .weather-icon circle { fill: none; stroke: #667888; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.weather-icon .weather-sun { fill: #f1a008; stroke: #f1a008; stroke-width: 2; }
.weather-icon .weather-sun-ray { stroke: #f1a008; stroke-width: 2; }
.weather-icon .weather-moon { fill: #e8e7f2; stroke: #5b568b; }
.weather-icon .weather-cloud { fill: #e8e7f2; stroke: #667888; }
.weather-icon .weather-rain { stroke: #267aa9; }
.weather-icon .weather-snow { stroke: #427dab; }
.weather-icon .weather-bolt { fill: #f1a008; stroke: #b77708; }
.weather-icon .weather-fog { stroke: #667888; }
.weather-attribution { margin: 3px 0 0; font-size: 9px; line-height: 1.2; color: var(--muted); }
.weather-attribution a { color: inherit; text-decoration: underline; }
@media (max-width: 40rem) {
  .weather-now { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 8px; }
  .weather-high-low { font-size: 11px; }
  .weather-days { gap: 4px; }
  .weather-day-range { font-size: 11px; }
}