/* base and common */
:root {
	/* global colors */
	--bg-color: #f1e2ff;
	--fg-color: black;
	--accent-color: #6900ca;
	--base-size: 14px;
	--hr-size: 1px;
	--border-size: 4px;
	--margin: 3em;

	/* service status colors */
	--ok-color: #19f757;
	--partial-color: #f7942f;
	--down-color: #e80000;
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--bg-color: #090012;
		--fg-color: white;
		--accent-color: #c382ff;

		/* service status colors */
		--ok-color: #0a8214;
		--partial-color: #b0661b;
		--down-color: #820000;
	}
}

* {
	color: var(--fg-color);
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/* page and incident list block styles */
body {
	background-color: var(--bg-color);
	font-size: var(--base-size);
	padding: 0 1em;
}

header,
footer {
	text-align: center;
}

footer {
	border-top: var(--border-size) double var(--accent-color);
}

section {
	margin-bottom: var(--margin);
}

hr {
	border: var(--hr-size) solid var(--accent-color);
}

h2.subtitle,
h3.subtitle {
	margin-bottom: 0;
}

p.subtitle {
	margin-top: .2em;
	font-size: .9em;
	font-style: italic;
}

/* service status block styles */

article.service-status-infoset {
	display: flex;
	gap: var(--margin);
}

@media screen and (max-width: 800px) {
	article.service-status-infoset {
		flex-direction: column;
	}

	details.service-status {
		width: 100%;
	}
}

details.up,
li.up {
	background-color: var(--ok-color);
}

details.partial,
li.partial {
	background-color: var(--partial-color);
}

details.down,
li.down {
	background-color: var(--down-color);
}

details.service-status {
	list-style: none;
	align-self: flex-start;
	max-width: 30%;
}

details.service-status summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	margin: 0;
}

details.service-status summary h3,
details.service-status p {
	margin: 0;
}

details ul {
	margin: 0;
}

details.website-status {
	border-left: 1ch solid var(--bg-color);
}

details.website-status li,
details.service-status p {
	padding: calc(var(--margin) / 4);
}

details>summary {
	display: block;
	font-weight: bold;
	font-size: var(--base-size);
	padding: calc(var(--margin) / 4);
}

details ul {
	list-style: none;
	padding-left: 0;

	/* element-specific */
	a {
		color: var(--accent-color);
		text-decoration: none;
		font-weight: bold;
	}

	a::before,
	.date::before {
		content: '[';
	}

	a::after,
	.date::after {
		content: ']';
	}

	a:hover {
		text-decoration: underline;
	}