.air-footer{align-items:center;gap:.5rem;flex-wrap:wrap}
.air-history-toggle,.air-history-retry{font:inherit;cursor:pointer;color:var(--beta-ink);border:1px solid var(--beta-border);border-radius:999px;background:var(--beta-soft);padding:.45rem .85rem}
.air-history-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.3rem .7rem;font-size:.78rem;font-weight:650;line-height:1.4;margin-inline:auto;transition:background-color .15s,border-color .15s}
.air-history-toggle svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.air-history-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.air-history-toggle:hover{border-color:var(--beta-green)}
.air-history-toggle[aria-expanded=true]{background:var(--beta-green);border-color:var(--beta-green);color:#fff}
.air-history{grid-column:1/-1;min-width:0;padding:1.25rem;border:1px solid var(--beta-border);border-radius:1rem;background:var(--beta-surface)}
.air-history[hidden],.air-history [hidden],.air-history-toggle[hidden]{display:none!important}
.air-history-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.air-history h2{font-size:1.05rem;margin:0;letter-spacing:-.03em}
.air-history-status{color:var(--beta-muted);font-size:.8rem;line-height:1.6}
.air-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.air-history-tile{min-width:0;padding:.9rem;border:1px solid var(--beta-border);border-radius:.75rem;background:var(--beta-surface)}
.air-history-tile>header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.7rem}
.air-history-tile h3{font-size:1.1rem;line-height:1.25;margin:0;letter-spacing:-.02em}.air-history-tile>header>span{font-size:.75rem;color:var(--beta-muted);white-space:nowrap}
.air-history-chart{height:190px;position:relative}
.air-tile-peaks{display:flex;gap:1rem;border-top:1px solid var(--beta-border);padding-top:.65rem;margin-top:.5rem}
.air-tile-peak{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.2rem .5rem;font-size:.8rem;color:var(--beta-muted)}
.air-tile-peak strong{color:var(--beta-ink);font-size:1.2rem;font-variant-numeric:tabular-nums}.air-tile-peak strong small{font-size:.7rem;font-weight:500}.air-tile-peak time{grid-column:1/-1;font-size:.7rem;line-height:1.5}
.air-band-legend{display:flex;align-items:center;gap:.45rem .85rem;flex-wrap:wrap;margin:1rem 0;font-size:.72rem;color:var(--beta-muted)}
.air-band-legend>span{display:inline-flex;align-items:center;gap:.3rem}.air-band-legend i{width:.75rem;height:.55rem;background:var(--air-color);border-radius:2px}
.air-band-info{position:relative;margin-left:auto}.air-band-info summary{cursor:pointer;list-style:none;font-size:1rem}.air-band-info summary::-webkit-details-marker{display:none}
.air-band-info p{position:absolute;z-index:8;right:0;width:min(280px,72vw);padding:.85rem;margin:.35rem 0;line-height:1.5;background:var(--beta-surface);color:var(--beta-ink);border:1px solid var(--beta-border);border-radius:.6rem;box-shadow:0 5px 20px #0002}
.air-average-empty{position:absolute;left:3rem;right:1rem;top:.5rem;font-size:.72rem;color:var(--beta-muted);background:var(--beta-surface);padding:.2rem .4rem;border-radius:.2rem}
.air-history-tooltip{position:absolute;z-index:5;pointer-events:none;box-sizing:border-box;max-width:calc(100% - 8px);padding:.7rem .8rem;border-radius:.55rem;background:var(--chart-tooltip-bg,#24332ef5);color:var(--chart-tooltip-text,#fff);box-shadow:0 5px 20px #0002;font-size:.8rem;line-height:1.45}
.air-tooltip-title{display:block;margin-bottom:.5rem;font-size:.82rem}.air-tooltip-rows{display:grid;grid-template-columns:.65rem minmax(0,1fr) auto;gap:.25rem .6rem;align-items:center}
.air-tooltip-swatch{width:.65rem;height:.65rem;border-radius:2px;border:1px solid #ffffff50}.air-tooltip-rows>strong{text-align:right;font-variant-numeric:tabular-nums;min-width:3.1rem;font-weight:600}
.air-history-tooltip>small{display:block;border-top:1px solid color-mix(in srgb,var(--chart-tooltip-text,#fff) 20%,transparent);margin-top:.5rem;padding-top:.4rem;font-size:.72rem;color:inherit;opacity:.8}.air-tooltip-category{display:block;font-size:.7rem;color:inherit;opacity:.8}
.air-history[aria-busy=true] .air-history-content{opacity:.65}.air-history button:focus-visible,.air-band-info summary:focus-visible{outline:3px solid var(--focus,#339b74);outline-offset:3px}
@media(max-width:759px){.air-history{padding:1rem}.air-history-grid{grid-template-columns:1fr}.air-history-chart{height:180px}.air-history-tile{padding:.75rem}.air-tile-peaks{gap:.6rem}.air-tile-peak strong{font-size:1.05rem}}
@media(prefers-reduced-motion:reduce){.air-history-toggle,.air-history-toggle svg{transition:none}}

.air-history-overall{margin:1rem 0;padding:1rem;border:1px solid var(--beta-border);border-radius:.75rem}.air-history-overall h3{margin:0;font-size:1.1rem;letter-spacing:-.02em}.air-history-overall .air-band-legend{margin:.7rem 0}.air-overall-chart{position:relative;height:280px}.air-overall-empty{font-size:.75rem;color:var(--beta-muted);margin:.5rem 0 0}@media(max-width:759px){.air-history-overall{padding:.75rem}.air-overall-chart{height:260px}}

.air-history-toggle{position:relative}.air-history-toggle[aria-busy=true] svg{visibility:hidden}.air-history-toggle[aria-busy=true]::after{content:'';position:absolute;right:.7rem;top:50%;width:.8rem;height:.8rem;box-sizing:border-box;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:air-history-spin .8s linear infinite}@keyframes air-history-spin{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}@media(prefers-reduced-motion:reduce){.air-history-toggle[aria-busy=true]::after{animation:none;transform:translateY(-50%)}}

/* Shared visual treatment with the portal's air-quality card. */
.feature-design .air-overview {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--beta-border) 65%, var(--beta-surface));
  border-radius: 0;
  background:
    radial-gradient(ellipse at 110% -10%, transparent 0 35%, rgb(118 150 139 / 8%) 35.5% 36%, transparent 36.5% 48%, rgb(118 150 139 / 6%) 48.5% 49%, transparent 49.5%),
    linear-gradient(135deg, var(--beta-surface), color-mix(in srgb, #c7bda3 9%, var(--beta-surface)));
  box-shadow: 0 4px 14px rgb(28 50 35 / 4%);
}
.feature-design .air-overview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7d9e90, #b9c9bd 55%, transparent);
  pointer-events: none;
}

/* Use the same surface tokens and segmented controls as the weather charts. */
.air-history{--beta-surface:var(--surface);--beta-soft:var(--surface-soft);--beta-ink:var(--text);--beta-muted:var(--muted);--beta-border:var(--border);border-radius:var(--radius)}