/* Permission-gated local weather. */
.weather-widget { --aqi-background: var(--soft-accent); --aqi-ink: var(--accent-dark); --aqi-border: var(--soft-accent-border); position: relative; z-index: 5; flex: 0 1 290px; width: 290px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, var(--paper)); color: var(--ink); font-size: .8rem; }
.weather-summary { display: flex; align-items: center; min-width: 0; padding: 3px 6px 3px 4px; gap: 4px; }
.weather-toggle { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 38px; padding: 6px 8px; background: transparent; border: 0; border-radius: 8px; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.weather-toggle:hover { background: var(--soft-accent); }
.weather-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.weather-aqi-summary { flex: 0 0 auto; padding: 2px 5px; border-radius: 5px; background: var(--aqi-background); color: var(--aqi-ink); border: 1px solid var(--aqi-border); font-size: .67rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; white-space: nowrap; }
.weather-air-quality { min-width: 0; margin: 10px 12px; padding: 10px; border: 1px solid var(--aqi-border); border-radius: 10px; background: var(--aqi-background); color: var(--aqi-ink); }
.weather-air-quality-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 600; }
.weather-air-quality-heading small { margin-left: 4px; color: var(--aqi-ink); font-size: .68rem; font-weight: 500; white-space: nowrap; }
.weather-aqi-value { color: var(--aqi-ink); font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.25; }
.weather-aqi-category { margin: 3px 0 0; color: var(--aqi-ink); line-height: 1.45; overflow-wrap: anywhere; }
.weather-aqi-status { margin: 4px 0 0; color: var(--aqi-ink); font-size: .68rem; line-height: 1.5; }
/* Severity colors follow the US AQI bands; labels remain visible alongside color. */
.weather-widget[data-aqi-level="good"] { --aqi-background: #e4f5ed; --aqi-ink: #145b4f; --aqi-border: #90ceba; }
.weather-widget[data-aqi-level="moderate"] { --aqi-background: #fff4c2; --aqi-ink: #6d4b05; --aqi-border: #dac470; }
.weather-widget[data-aqi-level="sensitive"] { --aqi-background: #fff0df; --aqi-ink: #8b3a10; --aqi-border: #e8b183; }
.weather-widget[data-aqi-level="unhealthy"] { --aqi-background: #ffe9ed; --aqi-ink: #963548; --aqi-border: #dda2af; }
.weather-widget[data-aqi-level="very-unhealthy"] { --aqi-background: #f0e8fc; --aqi-ink: #663596; --aqi-border: #bca0db; }
.weather-widget[data-aqi-level="hazardous"] { --aqi-background: #e4d6f2; --aqi-ink: #4d216f; --aqi-border: #a881c6; }
html[data-theme="dark"] .weather-widget[data-aqi-level="good"] { --aqi-background: #12362f; --aqi-ink: #b3efcf; --aqi-border: #2d6b5b; }
html[data-theme="dark"] .weather-widget[data-aqi-level="moderate"] { --aqi-background: #393117; --aqi-ink: #f6dda0; --aqi-border: #75602d; }
html[data-theme="dark"] .weather-widget[data-aqi-level="sensitive"] { --aqi-background: #422b1c; --aqi-ink: #ffd0a2; --aqi-border: #875436; }
html[data-theme="dark"] .weather-widget[data-aqi-level="unhealthy"] { --aqi-background: #40232d; --aqi-ink: #ffc3d0; --aqi-border: #894353; }
html[data-theme="dark"] .weather-widget[data-aqi-level="very-unhealthy"] { --aqi-background: #332441; --aqi-ink: #e6c5fc; --aqi-border: #70528b; }
html[data-theme="dark"] .weather-widget[data-aqi-level="hazardous"] { --aqi-background: #3d204c; --aqi-ink: #f3c4ff; --aqi-border: #8a4a9e; }
.weather-air-quality,
.weather-aqi-summary { transition: background-color 450ms cubic-bezier(.16,1,.3,1), border-color 450ms cubic-bezier(.16,1,.3,1), color 450ms cubic-bezier(.16,1,.3,1); }
.weather-aqi-value,
.weather-aqi-category,
.weather-aqi-status,
.weather-air-quality-heading small { transition: color 450ms cubic-bezier(.16,1,.3,1); }
.weather-current-temp { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weather-icon { width: 22px; height: 22px; display: inline-flex; flex: 0 0 22px; align-items: center; justify-content: center; color: var(--accent-dark); }
.weather-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.weather-chevron { flex: 0 0 13px; width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 1.8; transition: transform 260ms cubic-bezier(.16,1,.3,1); }
.weather-toggle[aria-expanded="true"] .weather-chevron { transform: rotate(180deg); }
.weather-enable { flex: 0 0 auto; border: 0; background: var(--soft-accent); color: var(--accent-dark); border-radius: 7px; padding: 7px 8px; min-height: 32px; font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; }
.weather-enable:hover { background: var(--soft-accent-border); }
.weather-enable:disabled { opacity: .6; cursor: wait; }
.weather-enable[hidden] { display: none; }
.weather-expansion { position: absolute; top: calc(100% + 8px); right: 0; width: 100%; z-index: 10; display: grid; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, var(--paper)); box-shadow: 0 12px 28px #17243b18; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 300ms cubic-bezier(.16,1,.3,1), opacity 180ms ease-out, visibility 300ms; }
.weather-widget.is-expanded .weather-expansion { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.weather-expansion-inner { min-height: 0; overflow: hidden; }
.weather-forecast { list-style: none; padding: 0 12px; margin: 0; }
.weather-day { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 5px 9px; padding: 10px 0; border-top: 1px solid var(--line); }
.weather-day-name { font-weight: 600; }
.weather-day-description { display: flex; align-items: center; gap: 5px; min-width: 0; }
.weather-day-condition { color: var(--muted); overflow-wrap: anywhere; font-size: .74rem; }
.weather-day .weather-icon { width: 18px; height: 18px; flex-basis: 18px; }
.weather-day-temperatures { text-align: right; font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weather-day-rain { grid-column: 1 / -1; font-size: .7rem; color: var(--muted); }
.weather-footer { border-top: 1px solid var(--line); margin: 0 12px; padding: 9px 0 10px; }
.weather-status { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.weather-footer-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 7px; }
.weather-disable { color: var(--accent-dark); background: none; border: 0; padding: 4px 0; font: inherit; font-size: .7rem; cursor: pointer; }
.weather-credits { color: var(--muted); font-size: .65rem; line-height: 1.5; }
.weather-credits a { color: inherit; }
@media (max-width: 720px) {
  .weather-widget { width: 100%; min-width: 0; }
  .weather-day { grid-template-columns: minmax(62px, .8fr) minmax(0,1.4fr) auto; }
  .weather-expansion { width: min(340px, calc(100vw - 40px)); right: auto; left: 0; }
  .weather-toggle { flex-wrap: wrap; gap: 3px 4px; padding-inline: 5px; }
  .weather-aqi-summary { order: 1; flex: 0 0 100%; max-width: 100%; box-sizing: border-box; font-size: .65rem; }
  .weather-summary { gap: 2px; padding-inline: 3px; }
  .weather-enable { font-size: 0; padding-inline: 7px; }
  .weather-enable::after { content: attr(data-short-label); font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) { .weather-expansion, .weather-chevron, .weather-air-quality, .weather-aqi-summary, .weather-aqi-value, .weather-aqi-category, .weather-aqi-status, .weather-air-quality-heading small { transition: none; } }