:root {
	/* COLORS */
	--color-white: #f0edee;
	--color-black: #0a090c;
	--color-slate: #07393c;
	--color-gray-dark: #222;
	--color-gray: #999999;
	--color-gray-light: #ccc;
	--color-gray-very-light: #eee;
	--color-apricot-light: #f7f3ee;
	--color-blue-baby: #90ddf0;
	/* --color-blue-dark: #003b63; */
	--color-blue-dark: #113c63;
	/* --color-blue-medium: #87a3b6; */
	--color-blue-medium: #55c4c5;
	--color-green: #2c666e;
	--color-purple: #7f7caf;
	--color-red: #b42e34;

	--color-link: var(--color-red);
	--color-font: var(--color-slate);
	--color-main: var(--color-blue-medium);
	--color-main-text: var(--color-black);
	--color-accent: var(--color-blue-dark);
	--color-accent-text: var(--color-white);
	--color-background-controls: var(--color-gray-light);
	--color-chart: var(--color-blue-dark);
	--color-chart-highlight: var(--color-blue-medium);

	/* TYPE */

	--font-size-very-large: 1.8rem;
	--font-size-large: 1.3rem;
	--font-size: 1.1rem;
	--font-size-small: 0.9rem;
	--font-size-very-small: 0.8rem;
	--line-height: 1.3em;

	--sans-serif-fonts: "Arial", "Helvetica Neue", "Helvetica", sans-serif;
	--display-fonts: "BreulGroteskBBold", sans-serif;
	--serif-fonts: "Times New Roman", "Georgia", serif;

	/* // SCAFFOLDING */
	--gap: 1rem;
	--container-width: 85rem;
	--container-padding-h: max(var(--gap), calc((100% - var(--container-width)) / 2));
	--tap-target: 48px;

	/* OTHER */
	--speed-transition: 150ms;
	--speed-transition-fast: 80ms;
}

/* RELEVANT RESET */
#rmi * {
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 calc(var(--gap) / 2) 0;
}

/* A valid, accessible method for visually hiding content (such as text labels on icon buttons) while preserving it for screen readers and other sight-assist tools. */
.visually-hidden:not(:focus) {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
html body.scroll-lock {
	overflow: hidden;
}

.serif {
	font: var(--font-size) / 1.5em var(--serif-fonts);
}

.sans-serif {
	/* The sans font is a little larger-looking, so bump it down a click for visual consistency */
	font: var(--font-size-small) / 1.3em var(--sans-serif-fonts);
}

.header {
	font: bold var(--font-size-large) / 1.2em var(--sans-serif-fonts);
}

.label {
	font: bold var(--font-size) / 1.2em var(--sans-serif-fonts);
}
.sublabel {
	font: bold var(--font-size-small) / 1.2em var(--display-fonts);
}

.agate {
	font: var(--font-size-small) / 1.3em var(--sans-serif-fonts);
}

p:not([class]) {
	/* Any standalone paragraph tag should just get this base styling*/
	font: var(--font-size-small) / 1.3em var(--sans-serif-fonts);
	color: var(--color-font);
	margin: 0;
}

a {
	color: currentColor;
	text-decoration-color: var(--color-link);
}

/* SCAFFOLDING FUN */

.rmi-container {
	padding: 0;
}

.stack {
	display: flex;
	flex-flow: column nowrap;
	gap: var(--gap);
}

.stack > :where(*, p:not([class])) {
	margin-block: 0;
}

.stack--margin > * {
	margin: 0 0 var(--gap) 0;
}

/* --- SOME CHART ARCHITECTURE ------------------------------------- */

.chart {
	--color-chart-text: var(--color-gray);
	--font-weight-chart: normal;
	--font-size-chart: 0.7rem;
	--stroke-width-chart: 0.5;
	position: relative;
	overflow: visible;
	height: 100%;
}

.chart.stack {
	--gap: 0.5rem;
}

.chart .tick {
	font-size: var(--font-size-chart);
	font-weight: var(--font-weight-chart);
	color: var(--color-chart-text);
	stroke-width: 0.5;
}
.stack .chart__wrapper {
	flex: 1 1;
	position: relative;
	transition: background var(--speed-transition) ease-in-out;
	min-height: 200px;
}
.chart__container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: opacity var(--speed-transition) ease-in-out,
		background var(--speed-transition) ease-in-out;
	background: transparent;
}
.chart__container svg {
	width: 100%;
	height: 100%;
}

.chart__container.hidden {
	opacity: 0;
}

/* --- SOME FULLSCREEN STUFF ------------------------------------- */

.fullscreen.chart {
	--color-chart-text: var(--color-slate);
	--font-weight-chart: bold;
	--font-size-chart: var(--font-size);
	--stroke-width-chart: 1;
}

.fullscreen .chart__wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: max(5vw, var(--gap));
	background: rgba(255, 255, 255, 0.9);
	z-index: 2000;
}

.fullscreen .chart__container {
	height: 100%;
	background: white;
}

/* --- ROUND ICON BUTTONS ------------------------------------- */

.control {
	font: var(--font-size-very-small) / 1.3em var(--sans-serif-fonts);
	text-transform: uppercase;
	color: var(--color-gray);

	border: none;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	border-radius: 50%;

	aspect-ratio: 1/1;
	height: 2rem;
	width: 2rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.control svg {
	fill: var(--color-gray);
	height: 60%;
	width: 60%;
	transition: fill var(--speed-transition) ease;
}

/* HOVER & FOCUS*/
.control:hover {
	background-color: var(--color-gray-light);
}

.control:where(:hover, :focus) svg {
	fill: var(--color-slate);
}
.control:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}
.control--close {
	margin: 0 0 0 auto;
	z-index: 201;
}

.control--close svg {
	stroke-width: 2;
	stroke: currentColor;
}

.chart .control--close {
	position: absolute;
	top: var(--gap);
	right: var(--gap);

	width: 2.5rem;
	height: 2.5rem;
}
.chart .control--close :global(svg) {
	width: 55%;
	height: 55%;
}

@media (pointer: fine) {
	/* We're using a mouse/This is not a touchscreen */
	:root {
		--tap-target: 2rem;
	}
}