/* Weather: town search, town cards (hero, stats, air quality, pollen, hourly strip, chart, 7 days), carousel, alert settings. */

/* town search */
.wx-add { position: relative; max-width: 520px }
.wx-add .field { width: 100% }
.wx-results { position: absolute; left: 0; right: 0; top: 60px; z-index: 3; background: var(--surface-container); border-radius: 12px; box-shadow: var(--e2); overflow: hidden }
.wx-results button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; text-align: left; cursor: pointer }
.wx-results button:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent) }
.wx-results .ms { color: var(--on-surface-variant) } .wx-results p { padding: 12px 16px }
.wx-empty { padding: 24px 0 }

/* cards: a grid for 1–2 towns on desktop, a carousel otherwise (see weather.js) */
.wx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); gap: 16px; align-items: start }
.wx-grid.carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px }
.wx-grid.carousel::-webkit-scrollbar { display: none }
.wx-grid.carousel > .wx { flex: 0 0 100%; scroll-snap-align: start }
.wx-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-bottom: -12px }
.wx { padding: 20px }
.wx h3 { margin: 8px 0 }
.wx h3 small { font-weight: 400 }
.wx-head { display: flex; align-items: flex-start; gap: 4px } .wx-head .icon-btn { margin-left: auto } .wx-head .icon-btn + .icon-btn { margin-left: 0 }
.ms.k { color: var(--on-surface-variant) }

/* now */
.wx-hero { display: flex; align-items: center; gap: 20px; margin: 16px 0; padding: 16px 20px; border-radius: 16px; background: var(--secondary-container); color: var(--on-secondary-container) }
.wx-hero .big { font-size: 88px; width: 112px; height: 112px; display: grid; place-items: center; flex: none; font-variation-settings: 'FILL' 1 }
.wx-hero .muted { color: inherit; opacity: .75 }
.wx-temp { font-size: 64px; line-height: 1; font-weight: 400 } .wx-cond { font-size: 18px; font-weight: 500; margin: 4px 0 2px }
.wx-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 20px }
.stat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-container-high) }
.stat > .ms { color: var(--on-surface-variant); flex: none } .stat b { display: block; font-size: 16px; line-height: 20px } .stat small { color: var(--on-surface-variant) }
.stat .dir { font-size: 16px; display: inline-block; vertical-align: -2px; color: var(--primary); font-variation-settings: 'FILL' 1 }

/* air quality + pollen */
.wx-air { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px }
.wx-air .pollutants { grid-template-columns: repeat(4, 1fr) }
.wx-air .pollutants { margin: 0 }
.aqi { padding: 12px 16px; border-radius: 12px; background: var(--surface-container-high) }
.aqi-top { display: flex; align-items: center; gap: 12px }
.aqi-n { font-size: 36px; line-height: 1; font-weight: 400; color: var(--primary) }
.aqi-top small { display: block }
.aqi-scale { position: relative; height: 6px; margin: 14px 0 4px; border-radius: 3px; background: linear-gradient(90deg, var(--surface-container-highest), var(--primary)) }
.aqi-scale i { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface-container-high) }
.aqi-ends { display: flex; justify-content: space-between; color: var(--on-surface-variant); font-size: 11px }
.wx > .wx-body > p.muted { margin-bottom: 20px }
.pollen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 20px }
.plant { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-container-high) }
.plant small { grid-column: 1 / -1 }
.dots { display: flex; gap: 3px } .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-container-highest) } .dots i.on { background: var(--primary) }

/* next 24 hours */
.wx-hours { display: flex; gap: 2px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin }
.hr { flex: none; width: 60px; text-align: center; padding: 8px 0; border-radius: 12px } .hr:first-child { background: var(--secondary-container); color: var(--on-secondary-container) }
.hr .ms.k { font-size: 26px; display: block; margin: 4px 0; font-variation-settings: 'FILL' 1 } .hr b { display: block } .hr small { color: var(--on-surface-variant); display: block; min-height: 16px; font-size: 12px }
.hr .pop { color: var(--tertiary); display: flex; justify-content: center; align-items: center; gap: 1px } .hr .pop .ms { font-size: 12px }
.wx-chart svg { width: 100%; height: auto; display: block; margin-bottom: 16px; font-size: 12px; font-weight: 500 }
.wx-chart text { fill: var(--on-surface) } .wx-chart .axis { fill: var(--on-surface-variant); font-weight: 400 }
.wx-chart .area { fill: var(--primary); opacity: .12 }
.wx-chart .line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round }
.wx-chart .dot { fill: var(--primary) }
.wx-chart .bar-rain { fill: var(--tertiary) }
.wx-chart .axis-line { stroke: var(--outline-variant) } .wx-chart .cross { stroke: var(--on-surface); stroke-dasharray: 3 3; opacity: .6 }

/* 7 days */
.wx-days .d { display: grid; grid-template-columns: 48px 32px 58px 36px 1fr 36px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--outline-variant) }
.wx-days .ms.k { font-size: 24px; font-variation-settings: 'FILL' 1 } .wx-days .pop { display: flex; align-items: center; gap: 2px; font-size: 12px } .wx-days .pop .ms { font-size: 14px; color: var(--tertiary) }
.wx-days b { text-align: right }
.range { height: 6px; border-radius: 3px; background: var(--surface-container-highest); position: relative }
.range i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--tertiary), var(--primary)) }

/* alert settings dialog */
.rule-towns { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px } .rule-towns .field { height: 40px; flex: 1; background: var(--surface-container-high) }
.rules { display: flex; flex-direction: column }
.rule { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--outline-variant); cursor: pointer }
.rule > .ms { color: var(--on-surface-variant) }
.rule-text { flex: 1; display: flex; flex-direction: column } .rule-text small { color: var(--on-surface-variant) }
.num { width: 72px; height: 28px; margin: 2px 2px 0; padding: 0 6px; border: 1px solid var(--outline); border-radius: 4px; background: var(--surface-container-high); color: var(--on-surface) }
select.num { width: auto }

@media (max-width: 700px) {
  .wx { padding: 16px }
  .wx-hero { gap: 12px; padding: 12px 14px } .wx-hero .big { font-size: 64px; width: 80px; height: 80px } .wx-temp { font-size: 48px }
  .wx-air .pollutants { grid-template-columns: repeat(2, 1fr) }
  .wx-days .d { grid-template-columns: 44px 28px 50px 32px 1fr 32px; gap: 6px }
  .wx-ctl { justify-content: center; margin-bottom: -8px }
}