/* status.grumble.gg: Grumble's dark graphite and ember, no web fonts, nothing from anywhere else */
:root {
	--bg: #15171a;
	--card: #1f2226;
	--line: #2b2f34;
	--text: #e6eaee;
	--strong: #f7f9fa;
	--muted: #9aa3ab;
	--accent: #f47c3c;
	--up: #3fbf74;
	--slow: #f4b740;
	--down: #e5534b;
	--none: #30353b;
	color-scheme: dark;
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a {
	color: var(--accent);
}
.top {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 860px;
	margin: 0 auto;
	padding: 24px 20px 8px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--strong);
	font-weight: 800;
	font-size: 20px;
	text-decoration: none;
}
.tag {
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(244, 124, 60, 0.16);
	color: var(--accent);
	font-weight: 700;
	font-size: 13px;
}
main {
	max-width: 860px;
	margin: 0 auto;
	padding: 12px 20px 48px;
	display: grid;
	gap: 22px;
}
.banner {
	padding: 22px 24px;
	border-radius: 16px;
	background: var(--card);
	border-left: 6px solid var(--up);
}
.banner.slow {
	border-left-color: var(--slow);
}
.banner.down {
	border-left-color: var(--down);
}
.banner h1 {
	margin: 0 0 4px;
	font-size: 24px;
	color: var(--strong);
}
.banner p {
	margin: 0;
	color: var(--muted);
}
.parts {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.part {
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--card);
}
.part-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.part-head div {
	display: grid;
}
.part-head strong {
	color: var(--strong);
	font-size: 16px;
}
.part-head span {
	color: var(--muted);
	font-size: 13px;
}
.pill {
	flex: none;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 13px;
	background: rgba(63, 191, 116, 0.16);
	color: var(--up);
}
.pill.slow {
	background: rgba(244, 183, 64, 0.16);
	color: var(--slow);
}
.pill.down {
	background: rgba(229, 83, 75, 0.18);
	color: var(--down);
}
.bars {
	display: grid;
	grid-template-columns: repeat(90, 1fr);
	gap: 2px;
	height: 34px;
}
.bars i {
	border-radius: 2px;
	background: var(--up);
}
.bars i.slow {
	background: var(--slow);
}
.bars i.dip {
	background: #f0954a;
}
.bars i.down {
	background: var(--down);
}
.bars i.none {
	background: var(--none);
}
.bars-key {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	color: var(--muted);
	font-size: 12px;
}
h2 {
	margin: 0 0 10px;
	font-size: 17px;
	color: var(--strong);
}
.incidents {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.incidents li {
	display: grid;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--card);
}
.incidents span,
.quiet,
.foot {
	color: var(--muted);
}
.quiet {
	margin: 0;
}
.foot {
	font-size: 13px;
}
.bars-key b {
	font-weight: inherit;
}
.d45 {
	display: none;
}
@media (max-width: 560px) {
	.bars {
		grid-template-columns: repeat(45, 1fr);
	}
	.bars i:nth-child(-n + 45) {
		display: none;
	}
	.d90 {
		display: none;
	}
	.d45 {
		display: inline;
	}
}