/* Same shape as api.dylan.at, chat.dylan.at and /srv/http/website (standard_styles.css). */
:root {
	--bg: #fff;
	--fg: #000;
	--link: #0000ee;
	--side: #fff;
	--muted: #666;
	--line: #000;
	--accent: #0000ee;
	--cell: #f2f2f2;
	--up: #0a7a0a;
	--warn: #b8860b;
	--down: #b00;
	--none: #ccc;
}

body {
	background: var(--bg);
	color: var(--fg);
	font-family: sans-serif;
	font-size: 16px;
	margin: 0 auto;
	max-width: 960px;
	padding: 10px;
	display: flex;
	flex-direction: row;
}

a { color: var(--link); }

.side {
	background: var(--side);
	width: 190px;
	margin-right: 20px;
	border-right: 1px solid currentColor;
	align-self: flex-start;
	position: sticky;
	top: 10px;
	max-height: calc(100vh - 30px);
	overflow-y: auto;
	padding-bottom: 8px;
	flex: none;
}

main { flex: 1; min-width: 0; }

h1, h2 { font-weight: normal; border-bottom: 1px solid currentColor; }
h1 { margin-top: 0; }
h2 { font-size: 17px; margin: 26px 0 8px; }

.nobullets { padding-left: 6px; margin: 0; display: flex; flex-direction: column; }
.nobullets li { list-style-type: none; padding: 2px 0; }
.nobullets li.active a { font-weight: bold; color: var(--fg); text-decoration: none; }
.side .grp { color: var(--muted); font-size: 12px; margin: 12px 0 2px 6px; }
.side li a { font-size: 14px; }
.who { color: var(--muted); font-size: 13px; padding-left: 6px; margin: 12px 0 0; }
.muted { color: var(--muted); }
.foot { font-size: 13px; margin-top: 26px; }

pre, code { font-family: monospace; background: #eee; }

/* status colours */
.dot { font-size: 11px; vertical-align: 1px; }
.up { color: var(--up); }
.warn { color: var(--warn); }
.down { color: var(--down); }
.none { color: var(--muted); }

.banner { margin: 12px 0; padding: 8px 10px; border: 1px solid currentColor; font-size: 18px; }

/* 90 day bar: one cell per day, oldest on the left */
.bar { display: flex; gap: 1px; height: 22px; min-width: 120px; }
.bar i { flex: 1; min-width: 1px; background: var(--none); }
.bar i.up { background: var(--up); }
.bar i.warn { background: var(--warn); }
.bar i.down { background: var(--down); }
.bar i.none { background: var(--none); }

/* summary cards, as on the api console */
table.cards { width: 100%; border-collapse: collapse; margin: 12px 0; }
table.cards td { border: 1px solid #ccc; padding: 6px 8px; vertical-align: top; width: 20%; }
table.cards .label { display: block; color: var(--muted); font-size: 12px; }
table.cards .value { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
table.data th, table.data td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #ddd; }
table.data th { font-weight: bold; background: var(--cell); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.svc td { vertical-align: middle; }
table.svc th.barcol, table.svc td.barcol { width: 45%; }

.spark { display: block; width: 100%; height: 70px; border: 1px solid #ccc; box-sizing: border-box; }
.axis { display: flex; justify-content: space-between; font-size: 12px; margin: 2px 0 0; }

@media (max-width: 600px) {
	body { flex-direction: column; }
	/* status on top, the service list at the bottom */
	main { order: -1; }
	.side { order: 2; position: static; max-height: none; width: auto; margin: 10px 0 0; border-right: 0; border-bottom: 1px solid currentColor; }
	.who { display: none; }
	table.svc th.barcol, table.svc td.barcol { display: none; }
	table.cards td { display: inline-block; width: 45%; box-sizing: border-box; }
	table.cards, table.cards tr { display: block; }
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #111; --fg: #eee; --link: #8ab4ff; --side: #111; --muted: #999; --cell: #222;
		--up: #5fbf5f; --warn: #d9a93b; --down: #f88; --none: #333;
	}
	pre, code { background: #222; }
	table.data th, table.data td { border-color: #333; }
	table.cards td, .spark { border-color: #333; }
}