@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap");

:root {
	/* Palette mirrors private-web's MUI theme: leaf-green primary, sky-blue
	   secondary, MUI light-mode neutrals for everything else. */
	--text: rgba(0, 0, 0, 0.87);
	--text-muted: rgba(0, 0, 0, 0.6);
	--text-light: rgba(0, 0, 0, 0.45);
	--bg-body: #fafafa;
	--bg-card: #ffffff;
	--bg-light: #f0f0f0;
	--bg-medium: #e6e6e6;
	--border: rgba(0, 0, 0, 0.12);
	--border-strong: rgba(0, 0, 0, 0.23);
	--primary: #388e3c;
	--primary-hover: #2e7d32;
	--primary-text: #ffffff;
	--info: #32669a;
	--info-hover: #275380;
	--info-text: #ffffff;
	--info-light: #e1ecf5;
	--success: #2e7d32;
	--success-text: #ffffff;
	--warning-light: #fff4e0;
	--radius: 4px;
	--radius-large: 0.3rem;
	--shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

* {
	box-sizing: border-box;
}

html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend,
textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

ul, ol { list-style: none; }

html {
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text);
}

body {
	background: var(--bg-body);
}

a {
	color: var(--info);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.monospace,
.version-text,
pre,
code {
	font-family: "Fira Code", "SF Mono", Monaco, "Cascadia Code", Consolas, monospace;
}

/* Hero */
.hero {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hero.is-light {
	background-color: var(--bg-light);
	color: var(--text);
}

.hero-body {
	flex-grow: 1;
	flex-shrink: 0;
	padding: 3rem 1.5rem;
}

/* Section */
.section {
	padding: 3rem 1.5rem;
}

/* Container */
.container {
	flex-grow: 1;
	margin: 0 auto;
	position: relative;
	width: auto;
}

/* Box */
.box {
	background-color: var(--bg-card);
	border-radius: var(--radius-large);
	box-shadow: var(--shadow);
	color: var(--text);
	display: block;
	padding: 1.25rem;
}

/* Title / subtitle */
.title,
.subtitle {
	word-break: break-word;
}

.title {
	color: var(--text);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.125;
	margin: 0 0 1.5rem;
}

.title.is-4 {
	font-size: 1.5rem;
}

.title.is-5 {
	font-size: 1.25rem;
}

.subtitle {
	color: var(--text-muted);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 1.5rem;
}

.is-size-5 { font-size: 1.25rem; }
.is-size-7 { font-size: 0.75rem; }

/* Text utilities */
.has-text-grey { color: var(--text-light); }
.has-text-grey-light { color: rgba(0, 0, 0, 0.38); }
.has-text-centered { text-align: center; }
.has-text-weight-bold { font-weight: 700; }

/* Background utilities */
.has-background-warning-light { background-color: var(--warning-light); }
.has-background-info-light { background-color: var(--info-light); }

/* Spacing utilities */
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 1.5rem !important; }

/* Level (flex bar) */
.level {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.level-left,
.level-right {
	align-items: center;
	display: flex;
	flex-basis: auto;
	flex-grow: 0;
	flex-shrink: 0;
}

.level-right { justify-content: flex-end; }

.level-item {
	align-items: center;
	display: flex;
	flex-basis: auto;
	flex-grow: 0;
	flex-shrink: 0;
	justify-content: center;
}

.level-item:not(:last-child) { margin-right: 0.75rem; }

@media (max-width: 768px) {
	.level {
		flex-direction: column;
		align-items: stretch;
	}
	.level-left,
	.level-right {
		justify-content: flex-start;
	}
}

/* Buttons */
.button {
	-webkit-appearance: none;
	align-items: center;
	background-color: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 1rem;
	height: 2.5em;
	justify-content: center;
	line-height: 1.5;
	padding: 0.5em 1em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.1s, border-color 0.1s;
}

.button:hover {
	border-color: var(--border-strong);
	color: var(--text);
	text-decoration: none;
}

.button.is-primary {
	background-color: var(--primary);
	border-color: transparent;
	color: var(--primary-text);
}

.button.is-primary:hover {
	background-color: var(--primary-hover);
	color: var(--primary-text);
}

.button.is-info {
	background-color: var(--info);
	border-color: transparent;
	color: var(--info-text);
}

.button.is-info:hover {
	background-color: var(--info-hover);
	color: var(--info-text);
}

.button.is-light {
	background-color: var(--bg-light);
	border-color: transparent;
	color: var(--text);
}

.button.is-light:hover {
	background-color: var(--bg-medium);
}

/* Notification */
.notification {
	background-color: var(--bg-light);
	border-radius: var(--radius);
	padding: 1.25rem 2.5rem 1.25rem 1.5rem;
	position: relative;
}

.notification.is-success {
	background-color: var(--success);
	color: var(--success-text);
}

/* Content (typographic flow) */
.content :where(h1, h2, h3, h4, h5, h6) {
	color: var(--text);
	font-weight: 600;
	line-height: 1.125;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.content h1 { font-size: 2em; }
.content h2 { font-size: 1.5em; }
.content h3 { font-size: 1.25em; }
.content h4 { font-size: 1.125em; }

.content p:not(:last-child),
.content ul:not(:last-child),
.content ol:not(:last-child) {
	margin-bottom: 1em;
}

.content ul { list-style: disc outside; margin-left: 2em; }
.content ol { list-style: decimal outside; margin-left: 2em; }
.content li + li { margin-top: 0.25em; }

.content pre {
	background-color: var(--bg-light);
	border-radius: var(--radius);
	overflow-x: auto;
	padding: 1em;
}

.content code {
	background-color: var(--bg-light);
	border-radius: var(--radius);
	padding: 0.1em 0.4em;
	font-size: 0.9em;
}

/* Forms */
.field:not(:last-child) {
	margin-bottom: 0.75rem;
}

.field.has-addons {
	display: flex;
	justify-content: flex-start;
}

.field.has-addons .control:not(:last-child) {
	margin-right: -1px;
}

.field.has-addons .control:not(:first-child):not(:last-child) .input {
	border-radius: 0;
}

.field.has-addons .control:first-child .input {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}

.field.has-addons .control:last-child .button,
.field.has-addons .control:last-child .input {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

.field.is-grouped {
	display: flex;
	justify-content: flex-start;
}

.field.is-grouped > .control:not(:last-child) {
	margin-right: 0.75rem;
}

.label {
	color: var(--text);
	display: block;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.5em;
}

.control {
	box-sizing: border-box;
	clear: both;
	font-size: 1rem;
	position: relative;
	text-align: inherit;
}

.control.is-expanded {
	flex-grow: 1;
	flex-shrink: 1;
}

.input {
	background-color: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-family: inherit;
	font-size: 1rem;
	height: 2.5em;
	line-height: 1.5;
	padding: 0.5em 0.75em;
	width: 100%;
}

.input:focus {
	border-color: var(--info);
	outline: none;
}

.select {
	display: inline-block;
	height: 2.5em;
	position: relative;
	vertical-align: top;
}

.select.is-fullwidth { width: 100%; }
.select.is-fullwidth select { width: 100%; }

.select select {
	background-color: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-family: inherit;
	font-size: 1rem;
	height: 2.5em;
	padding: 0.5em 2.5em 0.5em 0.75em;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.select::after {
	border: 2px solid var(--info);
	border-right: 0;
	border-top: 0;
	content: "";
	display: block;
	height: 0.5em;
	pointer-events: none;
	position: absolute;
	top: 50%;
	right: 1em;
	width: 0.5em;
	transform: translateY(-75%) rotate(-45deg);
	transform-origin: center;
}

.checkbox {
	cursor: pointer;
	display: inline-block;
	line-height: 1.25;
	position: relative;
}

.checkbox input { vertical-align: baseline; }

/* Versions page (groups of minor versions) */
.group-version {
	font-size: 1.2em;
	font-weight: bold;
	color: var(--text);
}

.group-version .version-patch,
.grouped-version .version-minor {
	color: var(--text-light);
}

.grouped-version {
	font-size: 1.1em;
	font-weight: bold;
	color: var(--text-light);
}

.grouped-version .version-patch {
	color: var(--text);
}

details.minor-version-group {
	cursor: pointer;
}

details.minor-version-group + details.minor-version-group {
	margin-top: 0.75rem;
}

details.minor-version-group:hover,
details.minor-version-group[open] {
	background-color: var(--bg-medium);
}

details.minor-version-group[open] summary {
	margin-bottom: 1rem;
}

.minor-version {
	color: var(--text);
	display: flex;
	margin-top: 0.5rem;
}

.minor-version:hover {
	background-color: var(--bg-light);
	text-decoration: none;
}