/* Astro Meteors — front-end styles */

.astrometeors {
	--am-bg-1: #0b1026;
	--am-bg-2: #05060f;
	--am-fg: #eef2ff;
	--am-muted: #9aa6c9;
	--am-accent: #cdd7ff;
	--am-border: rgba(255, 255, 255, 0.1);
	--am-hi: rgba(120, 150, 255, 0.14);
	--am-good: #5fd08a;
	--am-fair: #e7c14b;
	--am-poor: #e3756b;

	box-sizing: border-box;
	margin: 0 auto;
	padding: 12px 18px 14px;
	border-radius: 16px;
	background: radial-gradient(120% 120% at 50% 0%, var(--am-bg-1) 0%, var(--am-bg-2) 85%);
	color: var(--am-fg);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.astrometeors * {
	box-sizing: border-box;
}

.astrometeors--light {
	--am-bg-1: #f4f6fc;
	--am-bg-2: #e7ecf7;
	--am-fg: #1a2238;
	--am-muted: #5b6688;
	--am-accent: #2b3a78;
	--am-border: rgba(20, 30, 60, 0.12);
	--am-hi: rgba(60, 90, 200, 0.1);
	--am-good: #2e9d5b;
	--am-fair: #b8902a;
	--am-poor: #c2493d;
	box-shadow: 0 14px 36px rgba(40, 60, 110, 0.16);
}

.astrometeors .astrometeors__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.astrometeors .astrometeors__item {
	margin: 0;
	padding: 11px 10px;
	list-style: none;
	border-bottom: 1px solid var(--am-border);
	border-radius: 8px;
}

.astrometeors .astrometeors__item:last-child {
	border-bottom: 0;
}

.astrometeors .astrometeors__item::before,
.astrometeors .astrometeors__item::marker {
	content: none;
}

.astrometeors .astrometeors__item.is-next {
	background: var(--am-hi);
	box-shadow: inset 3px 0 0 0 var(--am-accent);
}

.astrometeors .astrometeors__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.astrometeors .astrometeors__name {
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--am-fg);
}

.astrometeors .astrometeors__active {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #06210f;
	background: var(--am-good);
	border-radius: 999px;
	vertical-align: middle;
}

.astrometeors .astrometeors__date {
	flex: 0 0 auto;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--am-accent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.astrometeors .astrometeors__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 3px;
}

.astrometeors .astrometeors__facts {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.76rem;
	color: var(--am-muted);
	font-variant-numeric: tabular-nums;
}

.astrometeors .astrometeors__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	margin-left: 4px;
}

.astrometeors .astrometeors__dot--good { background: var(--am-good); }
.astrometeors .astrometeors__dot--fair { background: var(--am-fair); }
.astrometeors .astrometeors__dot--poor { background: var(--am-poor); }

.astrometeors .astrometeors__detail {
	margin-top: 3px;
	font-size: 0.72rem;
	color: var(--am-muted);
}

.astrometeors .astrometeors__detail b {
	font-weight: 600;
	color: var(--am-accent);
}

.astrometeors .astrometeors__sep {
	margin: 0 4px;
	opacity: 0.6;
}

.astrometeors .astrometeors__countdown {
	flex: 0 0 auto;
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--am-muted);
	white-space: nowrap;
}

.astrometeors .astrometeors__item.is-next .astrometeors__countdown {
	color: var(--am-accent);
}

.astrometeors .astrometeors__more {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--am-border);
	text-align: center;
}

.astrometeors .astrometeors__more a {
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--am-accent);
	text-decoration: none;
	opacity: 0.9;
}

.astrometeors .astrometeors__more a:hover {
	opacity: 1;
	text-decoration: underline;
}