/* GENERAL */
:root
{
	/* Background colors */
	--bg-color: hsl(0,0%,100%);
	--bg-color-1: hsl(0,0%,95%);
	--bg-color-2: hsl(0,0%,90%);
	--bg-color-3: hsl(0,0%,85%);
	--bg-color-4: hsl(0,40%,85%);
	--bg-color-footer: hsl(90,40%,80%);
	--bg-color-active: hsl(90,60%,80%);
	--bg-color-highlight: hsl(90,80%,80%);
	--bg-color-submit: hsl(240,80%,80%);
	--bg-color-pre: hsl(200,30%,90%);
	--bg-color-off: hsl(16, 80%, 90%);

	/* default suite's bg colors */
	--bg-color-stable: hsl(130,90%,90%);
	--bg-color-testing: hsl(110,90%,90%);
	--bg-color-unstable: hsl(90,90%,90%);
	--bg-color-snapshot: hsl(30,90%,90%);
	--bg-color-experimental: hsl(10,90%,90%);

	/* Foreground colors */
	--color: hsl(120,50%,15%);
	--color-error: hsl(0,100%,50%);
	--color-warning: hsl(16, 100%, 66%);
	--color-notice: hsl(248, 53%, 58%);
	--color-info: hsl(249, 80%, 67%);
	--color-okay: hsl(120, 73%, 75%);
	--color-success: hsl(120, 100%, 25%);

	--bg-body-header: linear-gradient(var(--bg-color-1), var(--bg-color-footer));
	--bg-body-footer: linear-gradient(var(--bg-color-footer), var(--bg-color-1));
	--bg-off: linear-gradient(var(--bg-color-1), var(--bg-color-off));
}
@keyframes mbd_ongoing
{
	from { background-color: var(--bg-color); }
	to   { background-color: var(--bg-color-3); }
}
.mbd-ongoing  /* activity right now */
{
	animation: mbd_ongoing 2s infinite;
}
@keyframes mbd_attention
{
	from { background-color: var(--bg-color); }
	to   { background-color: var(--bg-color-4); }
}
.mbd-attention  /* something needs to be attended to */
{
	animation: mbd_attention 2s infinite;
}
.mbd-error
{
	color: var(--color-error) !important;
}
.mbd-warning
{
	color: var(--color-warning) !important;
}
.mbd-notice
{
	color: var(--color-notice) !important;
}
.mbd-info
{
	color: var(--color-info) !important;
}
.mbd-okay
{
	color: var(--color-okay) !important;
}
.mbd-success
{
	color: var(--color-success) !important;
}
.mbd-not-used
{
	text-decoration: line-through;
}
.mbd-body-menu-active
{
	background-color: var(--bg-color-active);
}
img.mbd-icon
{
	vertical-align: middle;
	height: 1.4em;
}

img.mbd-icon-small
{
	height: 0.8em;
}

/* MBD ONLY */
body.mbd
{
	color: var(--color);
	background-color: var(--bg-color);
}
/* margin/padding: Generally, we don't really want to change any browser's defaults. */
/* Any pimping that seems worthwhile anyway should be done here. */
body.mbd,
body.mbd label,
body.mbd h1
{
	margin: 0.1em;
	padding: 0.1em;
}
body.mbd iframe
{
	width: 100%;
	height: 100vh;
	border: 0;
}
body.mbd pre,
body.mbd code
{
	background-color: var(--bg-color-pre);
}
body.mbd table.mbd-listing
{
	font-family: monospace, monospace;
}
body.mbd table tr>th
{
	text-align: left;
}
body.mbd table.mbd-listing tr>th,
body.mbd table.mbd-listing tr.dir
{
	background-color: var(--bg-color-pre);
}
body.mbd .mbd-hidden
{
	display: none !important;
}

/* BG for default suites (ls) */
body.mbd td[class$='-stable']       { background-color: var(--bg-color-stable); }
body.mbd td[class$='-testing']      { background-color: var(--bg-color-testing); }
body.mbd td[class$='-unstable']     { background-color: var(--bg-color-unstable); }
body.mbd td[class$='-snapshot']     { background-color: var(--bg-color-snapshot); }
body.mbd td[class$='-experimental'] { background-color: var(--bg-color-experimental); }

body.mbd .mbd-grid-lcr
{
	display: grid;
	grid: auto / auto 1fr auto;
	justify-items: center;
	align-items: center;
}
body.mbd .mbd-grid-aaa
{
	display: inline-grid;
	grid: auto / auto auto auto;
	align-items: center;
}
body.mbd .mbd-grid-ll
{
	display: grid;
	grid: auto / auto 1fr;
}
body.mbd>header
{
	position: sticky;
	top: 0;
	z-index: 1;
	font-size: 1.2em;
	font-weight: bold;
	background: var(--bg-body-header);
}
body.mbd .mbd-off
{
	background: var(--bg-off);
}
body.mbd header a
{
	text-decoration: none;
}
body.mbd a
{
	color: inherit;
}
body.mbd>main section,
body.mbd>main aside
{
	border-style: groove;
	border-width: medium;
	border-radius: 0.5em;
}
body.mbd>main>section
{
	background-color: var(--bg-color-1);
}
body.mbd>main>section>section
{
	background-color: var(--bg-color-2);
}
body.mbd>main>section>section>section
{
	background-color: var(--bg-color-3);
}
body.mbd>main aside
{
	background-color: var(--bg-color-off);
}
body.mbd nav ul
{
	display: inline;
	padding-inline-start: 0em;
}
body.mbd nav>ul li
{
	display: inline-block;
	position: relative;
}
body.mbd .mbd-highlight,
body.mbd nav>ul li:hover  /* on menu item */
{
	background-color: var(--bg-color-highlight);
}
body.mbd nav form
{
	display: inline;
}
body.mbd nav>ul>li>ul        /* dropdown menu */
{
	position: absolute;
	display: none;
}
body.mbd nav>ul>li:hover>ul  /* on dropdown */
{
	display: inline-grid;
	left: auto;
	right: 0;
	width: 100%;
	background-color: var(--bg-color-highlight);
	z-index: 5;
}
body.mbd .mbd-dim,
body.mbd input::placeholder
{
	filter: opacity(30%);
}
body.mbd form.mbd-api>details  /* '[ls]->': -> should be after submit button, to the right. */
{
	display: inline;
}
body.mbd form.mbd-api input[type="submit"]  /* API call submit */
{
	border-radius: 0.2em;
	border-width: thin;
	background-color: var(--bg-color-submit);
}
body.mbd input[type="text"],
body.mbd input[type="url"],
body.mbd input[type="number"]
{
	min-width: 14em;
	max-width: 25em;
}
body.mbd #api-popup
{
	display: table;  /* get real centering */
	/* gray-out everything */
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: rgba(0,0,0,0.6);
}
body.mbd #api-popup>div
{
	display: table-cell;
	vertical-align: middle;
}
body.mbd #api-popup>div>div  /* popup content */
{
	background-color: var(--bg-color-1);
	margin: auto;
	width: fit-content;
	max-height: 90vh;
	max-width: 90vw;
	overflow-y: auto;
}
body.mbd>footer
{
	position: sticky;
	bottom: 0;
	font-size: smaller;
	font-family: monospace, monospace;
	background: var(--bg-body-footer);
}
