.simple-page.city-aqi-page{align-items:flex-start}.city-aqi-page .simple-page-card h2.city-section-h2{margin:var(--space-6) 0 var(--space-3);color:var(--text);font-family:var(--font-d);font-size:var(--text-xl);line-height:1.25}.city-aqi-hero{gap:var(--space-5);margin-bottom:var(--space-4);flex-wrap:wrap;align-items:center;display:flex}.city-aqi-badge{min-width:132px;padding:var(--space-4) var(--space-5);border:2px solid var(--border2);border-radius:var(--r2);background:var(--card);flex-direction:column;justify-content:center;align-items:center;display:flex}.city-aqi-value{font-family:var(--font-d);font-size:var(--text-hero);font-weight:800;line-height:1}.city-aqi-unit{font-family:var(--font-m);font-size:var(--text-xs);letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-top:4px}.city-aqi-summary{flex:280px}.city-aqi-level{margin-bottom:var(--space-2);font-family:var(--font-d);font-size:var(--text-xl);font-weight:700;display:block}.city-aqi-updated{font-size:var(--text-sm)!important;color:var(--text3)!important}.city-pollutant-grid{gap:var(--space-3);margin-bottom:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));display:grid}.city-pollutant{padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--r1,10px);background:var(--bg);flex-direction:column;gap:4px;display:flex}.city-pollutant-label{font-family:var(--font-m);font-size:var(--text-sm);letter-spacing:.5px;color:var(--text2)}.city-pollutant-value{font-family:var(--font-d);font-size:var(--text-xl);color:var(--text);font-weight:700}.city-pollutant-unit{font-size:var(--text-sm);color:var(--text3);font-weight:400}.city-pollutant-note{font-size:var(--text-xs);color:var(--text3)}.city-trend-table{border-collapse:collapse;width:100%;margin-bottom:var(--space-4);font-size:var(--text-base)}.city-trend-table th,.city-trend-table td{text-align:left;border-bottom:1px solid var(--border);padding:10px 12px}.city-trend-table th{font-family:var(--font-m);font-size:var(--text-xs);letter-spacing:.5px;text-transform:uppercase;color:var(--text3)}.city-trend-table td{color:var(--text2)}.city-inline-link,.city-cta-button{color:var(--sidebar-active-text);font-weight:600;text-decoration:none}.city-inline-link:hover{text-decoration:underline}.city-cta-row{gap:var(--space-4);margin-top:var(--space-5);flex-wrap:wrap;align-items:center;display:flex}.city-cta-button{border-radius:var(--r1,10px);background:color-mix(in srgb, var(--accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border));gap:6px;padding:12px 20px;font-weight:700;transition:background .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s;display:inline-flex}.city-cta-button:hover{background:color-mix(in srgb, var(--accent) 15%, transparent);border-color:color-mix(in srgb, var(--accent) 38%, var(--border));color:var(--text);transform:translateY(-1px);box-shadow:0 10px 22px #00000024}.city-cta-button:active{box-shadow:none;transform:translateY(0)}.city-directory{margin:0 0 var(--space-4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 16px;padding:0;list-style:none;display:grid}.city-directory a{color:var(--text2);font-size:var(--text-base);text-decoration:none}.city-directory a:hover{color:var(--sidebar-active-text);text-decoration:underline}.city-faq{margin:0 0 var(--space-4);flex-direction:column;gap:8px;display:flex}.city-faq-item{border:1px solid var(--border);border-radius:var(--r1,10px);background:color-mix(in srgb, var(--text) 2%, transparent);padding:12px 16px}.city-faq-item>summary{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;list-style:none;display:flex}.city-faq-item>summary::-webkit-details-marker{display:none}.city-faq-item>summary:after{content:"+";color:var(--text2);flex:none;font-weight:700}.city-faq-item[open]>summary:after{content:"−"}.city-faq-question{font-size:var(--text-base);color:var(--text);margin:0;font-weight:600;display:inline}.city-faq-answer{color:var(--text2);margin:10px 0 0}.city-nearby-list{margin:0 0 var(--space-4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 16px;padding:0;list-style:none;display:grid}.city-nearby-list a{color:var(--text2);font-size:var(--text-base);text-decoration:none}.city-nearby-list a:hover{color:var(--sidebar-active-text);text-decoration:underline}.city-nearby-distance{color:var(--text3,var(--text2));font-size:var(--text-sm,.875rem);opacity:.75}
