.cbd-card {
	--cbd-bg: #ffffff;
	--cbd-fg: #1d2a33;
	--cbd-muted: #5f6f7a;
	--cbd-line: #e3e9ee;
	--cbd-accent: #1f6fa8;
	background: var(--cbd-bg);
	color: var(--cbd-fg);
	border: 1px solid var(--cbd-line);
	border-radius: 12px;
	padding: 16px 18px;
	font-size: 14px;
	line-height: 1.4;
	box-sizing: border-box;
}
.cbd-card * { box-sizing: border-box; }
.cbd-empty { color: var(--cbd-muted); }

.cbd-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13px;
}
.cbd-station { font-weight: 600; }
.cbd-time { color: var(--cbd-muted); font-variant-numeric: tabular-nums; }

.cbd-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 6px 0 12px;
}
.cbd-temp {
	font-size: 46px;
	font-weight: 300;
	letter-spacing: -1px;
	color: var(--cbd-accent);
	font-variant-numeric: tabular-nums;
}
.cbd-temp small { font-size: 20px; margin-left: 2px; vertical-align: top; }
.cbd-minmax {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: var(--cbd-muted);
	font-variant-numeric: tabular-nums;
}

.cbd-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--cbd-line);
}
.cbd-grid div { margin: 0; }
.cbd-grid dt {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cbd-muted);
	margin: 0;
}
.cbd-grid dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.cbd-foot {
	margin-top: 12px;
	font-size: 11px;
	color: var(--cbd-muted);
}
.cbd-foot a { color: inherit; text-decoration: underline; }
.cbd-stale { color: #a15c00; }

.cbd-compact .cbd-temp { font-size: 36px; }
.cbd-compact .cbd-main { margin-bottom: 8px; }

@media (prefers-color-scheme: dark) {
	.cbd-card.cbd-auto-dark {
		--cbd-bg: #1b232a;
		--cbd-fg: #e6edf2;
		--cbd-muted: #9aabb7;
		--cbd-line: #2c3842;
		--cbd-accent: #6bb6ec;
	}
}