.weather { position: relative; flex: 0 0 auto; color: var(--text-secondary); font-size: var(--font-size-s); }
.weather-summary { display: flex; align-items: center; gap: .35rem; min-height: 2rem; cursor: pointer; list-style: none; user-select: none; transition: color .15s ease-out; }
.weather-summary::-webkit-details-marker { display: none; }
.weather-summary::marker { content: ''; }
.weather-summary:hover, .weather[open] .weather-summary { color: var(--text-primary); }
.weather-icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.weather-temperature { min-width: 2.25em; font-variant-numeric: tabular-nums; letter-spacing: var(--spacing-m); }
.weather-panel { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 100; width: 16rem; max-width: calc(100vw - 2.7rem); box-sizing: border-box; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: .375rem; background: var(--bg); box-shadow: 0 6px 24px var(--selection); color: var(--text-primary); line-height: 1.75; letter-spacing: var(--spacing-m); }
.weather-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.weather-city { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.weather-refresh { border: 0; padding: .15rem .3rem; background: none; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 1.1rem; line-height: 1; }
.weather-refresh:hover { color: var(--text-primary); }
.weather-refresh:disabled { opacity: .4; cursor: wait; }
.weather-panel p { margin: .5rem 0 0; }
.weather-panel .weather-location-source, .weather-panel .weather-updated { color: var(--text-secondary); font-size: .75rem; }
.weather-attribution { display: flex; flex-direction: column; gap: .2rem; margin-top: .85rem; padding-top: .65rem; border-top: 1px solid var(--border); font-size: .6875rem; }
.weather-attribution a { color: var(--text-secondary); text-decoration: none; }
.weather-attribution a:hover { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--text-tertiary); }
.weather-attribution [hidden] { display: none; }
@media (max-width: 600px) { .header-actions { gap: .65rem; } .weather-panel { right: -3rem; } }

.site-header > nav:first-child { gap: 1rem; }
.site-header .site-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { flex: 0 0 auto; }