.bylit-air {
	--air-ink: #18333b;
	--air-muted: #5d6e73;
	--air-line: #dce6e8;
	font-family: inherit;
	color: var(--air-ink);
	max-width: 100%;
	margin: 1.5rem 0;
}

.bylit-air *, .bylit-air *::before, .bylit-air *::after { box-sizing: border-box; }

.bylit-air__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.bylit-air__eyebrow {
	margin: 0 0 .18rem;
	color: #39737e;
	font-size: .75rem;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.bylit-air h3 { margin: 0; color: var(--air-ink); font-size: clamp(1.45rem, 3vw, 2rem); }

.bylit-air__status {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	border: 1px solid var(--air-line);
	border-radius: 999px;
	padding: .45rem .75rem;
	background: #f6f9f9;
	font-size: .82rem;
	font-weight: 700;
	white-space: nowrap;
}

.bylit-air__status > span { width: .65rem; height: .65rem; border-radius: 50%; background: #76858a; }
.bylit-air__status--good > span { background: #16806e; }
.bylit-air__status--fair > span { background: #548d28; }
.bylit-air__status--moderate > span { background: #d28a00; }
.bylit-air__status--poor > span { background: #d84a16; }
.bylit-air__status--very-poor > span { background: #9e153b; }

.bylit-air-alert {
	margin: 0 0 .8rem;
	border: 1px solid #e49a36;
	border-left: 4px solid #d87500;
	border-radius: 9px;
	padding: .55rem .7rem;
	background: #fff8e8;
	box-shadow: 0 3px 10px rgba(126, 65, 0, .08);
}

.bylit-air-alert--information { border-color: #d85a35; background: #fff4ef; }
.bylit-air-alert--alert { border-color: #9e2445; background: #fcedf1; }

.bylit-air-alert__summary {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	align-items: center;
	gap: .55rem;
}

.bylit-air-alert__icon {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: #c76600;
	color: #fff;
	font-size: .95rem;
	font-weight: 900;
	line-height: 1;
}

.bylit-air-alert--information .bylit-air-alert__icon { background: #c52f17; }
.bylit-air-alert--alert .bylit-air-alert__icon { background: #8d1535; }
.bylit-air-alert__label { margin: 0; color: #7e3d00; font-size: .69rem; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.bylit-air-alert--information .bylit-air-alert__label, .bylit-air-alert--alert .bylit-air-alert__label { color: #8d1535; }
.bylit-air-alert__advice { margin: .08rem 0 0; color: #594a36; font-size: .71rem; line-height: 1.3; }

.bylit-air-alert__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: .35rem;
	margin: .45rem 0 0;
	padding: .4rem 0 0;
	border-top: 1px solid rgba(126, 61, 0, .16);
	list-style: none;
}

.bylit-air-alert__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	min-width: 0;
	margin: 0;
	padding: 0 .15rem;
	font-size: .75rem;
}

.bylit-air-alert__list strong { color: #362100; }
.bylit-air-alert__list small { display: block; color: #745f44; font-size: .64rem; line-height: 1.15; }
.bylit-air-alert__list a { flex: 0 0 auto; color: #6b3900; font-size: .69rem; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }

.bylit-air__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .75rem;
}

.bylit-air-card {
	--card-accent: #73868b;
	--card-bg: #fff;
	--card-pill: #eef2f3;
	--card-pill-ink: #42545a;
	min-width: 0;
	border: 1px solid var(--air-line);
	border-top: 5px solid var(--card-accent);
	border-radius: 12px;
	padding: .9rem;
	background: var(--card-bg);
	box-shadow: 0 4px 14px rgba(24, 51, 59, .07);
}

.bylit-air-card--good {
	--card-accent: #2b8a62;
	--card-bg: #f2faf6;
	--card-pill: #d9f0e4;
	--card-pill-ink: #176343;
}

.bylit-air-card--fair {
	--card-accent: #69a83b;
	--card-bg: #f7fbf1;
	--card-pill: #e4f2d7;
	--card-pill-ink: #477624;
}

.bylit-air-card--moderate {
	--card-accent: #d49a00;
	--card-bg: #fffbeb;
	--card-pill: #f8e9b5;
	--card-pill-ink: #7c5900;
}

.bylit-air-card--poor {
	--card-accent: #e36b22;
	--card-bg: #fff6ed;
	--card-pill: #f9dcc5;
	--card-pill-ink: #91400f;
}

.bylit-air-card--very-poor {
	--card-accent: #c7353b;
	--card-bg: #fff1f2;
	--card-pill: #f6d2d5;
	--card-pill-ink: #8f1f28;
	border-color: #e7aeb2;
}

.bylit-air-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; min-height: 2.75rem; }
.bylit-air-card__top strong { display: block; color: #215e69; font-size: 1.05rem; }
.bylit-air-card__top > div > span { display: block; color: var(--air-muted); font-size: .75rem; line-height: 1.2; }
.bylit-air-card__level {
	display: inline-block;
	flex: 0 0 auto;
	border-radius: 999px;
	padding: .22rem .45rem;
	background: var(--card-pill);
	color: var(--card-pill-ink);
	font-size: .62rem;
	font-weight: 800;
	line-height: 1;
}
.bylit-air-card__value { margin: .65rem 0 0; color: var(--air-ink); font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 800; line-height: 1; }
.bylit-air-card__value small { color: var(--air-muted); font-size: .68rem; font-weight: 600; }
.bylit-air-card__threshold { margin: .6rem 0 0; color: #7b3e17; font-size: .68rem; line-height: 1.3; }
.bylit-air__source, .bylit-air__unavailable { margin: .7rem 0 0; color: var(--air-muted); font-size: .72rem; line-height: 1.45; }
.bylit-air__unavailable { border-left: 3px solid #9aa8ab; padding-left: .7rem; }

@media (max-width: 760px) {
	.bylit-air__heading { align-items: flex-start; flex-direction: column; }
	.bylit-air__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bylit-air-alert__list { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
	.bylit-air__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.bylit-air * { scroll-behavior: auto !important; }
}