/* Allergens tab styles. Loaded in the order base, weather, sky, allergens, about. The tiles below the hero are plain glass cards, no picture behind any of their text. */
.allergen-hero{padding:30px;margin-top:10px;background:linear-gradient(135deg,rgba(72,38,112,.74),rgba(20,28,66,.7))}
.allergen-hero h2{font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.04em;margin:0 0 10px}
.allergen-hero p{margin:0;max-width:640px;line-height:1.5}
.allergen-hero p+p{margin-top:8px;color:var(--muted);font-size:1rem}
/* Marcus, 2026-09-22: 6 rotating hero pictures (day/night matched, one random pick per load), the Sky tab's
   .sky-hero.space-image shape -- a ::before picture layer behind the card's own existing gradient, which now
   also serves as the text-legibility tint over the picture. Same no-boxes rule as everywhere else: the gradient
   is on .allergen-hero itself (see above), not a separate panel around the text. */
.allergen-hero.air-scene{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(170px,20vw,240px);text-shadow:var(--ink-shadow);-webkit-text-stroke:2px rgba(0,0,0,.55);paint-order:stroke fill}
.allergen-hero.air-scene::before{content:"";position:absolute;inset:0;z-index:-1;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:var(--scene-image,none)}
.allergen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.allergen-tile{padding:17px}
.allergen-tile span{display:block;color:var(--muted);font-size:1rem;margin-bottom:7px}
.allergen-tile b{display:block;font-size:1.05rem;margin-bottom:6px}
.allergen-tile small{display:block;color:var(--muted);font-size:1rem;line-height:1.45}
.allergen-tile small+small{margin-top:3px}
/* Manager, 2026-09-23: the Precipitation tile's two added lines (next rain, expected total today) are longer
   than the plain "Current" note the other tiles carry, and wrap to more lines at narrow widths. text-sizing's
   16px site-wide floor rules out a smaller font-size for these, so only line-height and the gap between lines
   are tightened -- keeps the tile closer to Wind/Humidity's own height without going under the floor. */
.allergen-tile small.precip-line{line-height:1.25}
.allergen-tile small.precip-line+small.precip-line{margin-top:1px}
.allergen-tile b+.scale,.allergen-tile b+.meter{margin-top:2px}
.allergen-note{color:var(--muted);font-size:1rem;line-height:1.5;margin:0 0 12px}
.allergen-credit{color:var(--muted);font-size:1rem;line-height:1.55;margin:26px 0 0;max-width:760px}
.allergen-credit a{color:inherit}
@media(max-width:900px){.allergen-section .section-title{display:block}.allergen-section .section-title p{margin-top:6px}}
@media(max-width:480px){.allergen-hero{padding:22px}.allergen-grid{grid-template-columns:1fr 1fr}}
.us-pollen{padding:18px}
.pollen-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;margin:12px 0}
.pollen-name{font-weight:700}
.pollen-track{display:flex;gap:4px}
.pollen-track i{flex:1;height:14px;border-radius:4px;background:var(--track-soft);border:1px solid var(--pollen-edge)}
.pollen-track i.on{border-color:transparent}
.pollen-l1 i.on{background:#7fc97f}.pollen-l2 i.on{background:#c7e05a}.pollen-l3 i.on{background:#f4d03f}.pollen-l4 i.on{background:#f39c12}.pollen-l5 i.on{background:#e74c3c}
.pollen-cat{min-width:88px;text-align:right;font-size:1rem}
.pollen-out .pollen-cat{grid-column:2/4;text-align:left;color:var(--muted)}
.us-pollen-source{margin:14px 0 0;font-size:1rem;line-height:1.5;color:var(--ink-soft)}
.us-pollen-source a{color:var(--link);text-decoration:underline}