@-moz-document url-prefix()
{
	/* firefox tweaks */
}

/* Colors and animations */
: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%);
	--bg-color-on: hsl(130, 90%, 90%);

	/* default suite's bg colors */
	--bg-color-stable: hsl(240,90%,90%);
	--bg-color-hotfix: hsl(120,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, 100%, 35%);
	--color-success: hsl(120, 100%, 25%);

	--bg-header: linear-gradient(var(--bg-color-1), var(--bg-color-footer));
	--bg-footer: linear-gradient(var(--bg-color-footer), var(--bg-color-1));
	--bg-off: linear-gradient(var(--bg-color-1), var(--bg-color-off));
	--bg-on: linear-gradient(var(--bg-color-1), var(--bg-color-on));
}
@keyframes mbd_ongoing
{
	from { background-color: var(--bg-color); }
	to   { background-color: var(--bg-color-3); }
}
@keyframes mbd_attention
{
	from { background-color: var(--bg-color); }
	to   { background-color: var(--bg-color-4); }
}

/* See builtins.Css class */
.mbd-error,.mbd-severity3    { color: var(--color-error) !important; }
.mbd-warning,.mbd-severity2  { color: var(--color-warning) !important; }
.mbd-notice,.mbd-severity1   { color: var(--color-notice) !important; }
.mbd-info                    { color: var(--color-info) !important; }
.mbd-okay,.mbd-severity0     { color: var(--color-okay) !important; }
.mbd-success                 { color: var(--color-success) !important; }
.mbd-not-used                { text-decoration: line-through; }

/* Background classes */
.mbd-bg-1 { background-color: var(--bg-color-1); }
.mbd-bg-2 { background-color: var(--bg-color-2); }
.mbd-bg-3 { background-color: var(--bg-color-3); }
.mbd-bg-4 { background-color: var(--bg-color-4); }

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

/* Misc */
.mbd-ongoing          { animation: mbd_ongoing 2s infinite; }
.mbd-attention        { animation: mbd_attention 2s infinite; }
.mbd-menu-active      { background-color: var(--bg-color-active); }
.mbd-highlight        { background-color: var(--bg-color-highlight); }
.mbd-hidden           { display: none !important; }
.mbd-off              { background: var(--bg-off); }
.mbd-on               { background: var(--bg-on); }
.mbd-dim              { filter: opacity(30%); }
img.mbd-icon          { height: 1.4em; vertical-align: middle; }
img.mbd-icon-small    { height: 0.8em; vertical-align: middle; }
button.mbd-button     { background-color: var(--bg-color-submit); }
button.mbd-button-raw { border: none; background: none; }
a.mbd-underline       { text-decoration: underline; }

/* Grids */
.mbd-grid-llr { padding: 0.1em; display: grid;        grid: auto / 1fr 1fr auto; }
.mbd-grid-lcr { padding: 0.1em; display: grid;        grid: auto / auto 1fr auto;  align-items: center; justify-items: center; }
.mbd-grid-aaa { padding: 0.1em; display: inline-grid; grid: auto / auto auto auto; align-items: center; }
.mbd-grid-ll  { padding: 0.1em; display: grid;        grid: auto / auto 1fr;       align-items: center; }
.mbd-grid-lr  { padding: 0.1em; display: grid;        grid: auto / 1fr auto;       align-items: center; }

/* API calls */
form.mbd-api>details  { display: inline; }  /* '[ls]->': -> should be after submit button, to the right. */
form.mbd-api input[type="submit"]  /* API call submit */
{
	border-radius: 0.2em;
	border-width: thin;
	background-color: var(--bg-color-submit);
}

/* Popup */
#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);
}
#mbd-api-popup>div  /* popup content */
{
	background-color: var(--bg-color-1);
	margin: auto;
	max-height: 90vh;
	max-width: 90vw;
	overflow-y: auto;
	padding: 0.3em 0.6em 0.3em 0.3em;
}

/* Generic styles */
body
{
	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,
label,
h1,
section,
pre
{
	margin: 0.1em;
	padding: 0.1em;
}
iframe
{
	width: 100%;
	height: 100vh;
	border: 0;
}
pre,
code { background-color: var(--bg-color-pre); white-space: break-spaces; }
table tr>th { text-align: left; }
body>header
{
	position: sticky;
	top: 0;
	z-index: 1;
	font-size: 1.2em;
	font-weight: bold;
	background: var(--bg-header);
}
header a { text-decoration: none; }
a { color: inherit; }

/* Sections and aside */
section,
aside
{
	border-style: groove;
	border-width: thin;
	border-radius: 0.3em;
}
section                 { background-color: var(--bg-color-1); margin: 1px; }
section>section         { background-color: var(--bg-color-2); }
section>section>section { background-color: var(--bg-color-3); }
aside                   { background-color: var(--bg-color-off); }

/* Navigation (menus) */
nav ul          { display: inline; padding-inline-start: 0em; }
nav>ul li       { display: inline-block; position: relative; vertical-align: top; }
nav>ul li:hover { background-color: var(--bg-color-highlight); }
nav form        { display: inline; }
nav>ul>li>ul    { display: none; }  /* dropdown menu */
nav>ul>li:hover>ul  /* on dropdown menu */
{
	display: inline-grid;
	position: absolute;
	background-color: var(--bg-color-footer);
}
nav>ul>li:hover>ul>li:hover  /* on dropdown menu item */
{
	background-color: var(--bg-color-highlight);
}

/* Form inputs */
input::placeholder   { filter: opacity(30%); }
input[type="number"] { width: 5em; }
input[type="text"]   { width: 30em; }
input[type="url"]    { width: 50em; }
textarea             { width: 60em; height: 20em; }

body>footer
{
	position: sticky;
	bottom: 0;
	font-size: smaller;
	font-family: monospace, monospace;
	background: var(--bg-footer);
}
