/*----------------------------------------

		# RESET
		
----------------------------------------*/

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; line-height: calc(1em + 0.6rem); }


/*----------------------------------------

	# Primary VARs
	
----------------------------------------*/


:root {

	/* spacing -- using cloth industry sizing */
	--s: 2rem;
	--spacing: var(--s);
	--spacing-l: calc(var(--s) * 1.5);
	--spacing-xl: calc(var(--s) * 2);
	--spacing-xxl: calc(var(--s) * 3); /* No --- cannot bloody use 2xl since that could imply 2x of xl which this is not */
	--spacing-xxxl: calc(var(--s) * 5);
	--spacing-s: calc(var(--s) / 2);
	--spacing-xs: calc(var(--s) / 4);
	--spacing-xxs: calc(var(--s) / 5);
	
	--border-radius: .5rem;
	--border-radius-l: 1rem;
	
	/* font sizes  */
	--font-size-xs: 1.3rem;
	--font-size-s: 1.4rem;
	--font-size: 1.6rem;
	--font-size-m: 1.8rem; /* Keep this for now as a placeholder */
	--font-size-l: 2rem;
	--font-size-xl: 2.4rem;
	--font-size-xxl: 3.2rem;
	--font-size-xxxl: 4.2rem;
	
	/* container */
	--max-width: 1200px;
	

	
	/*----------------------------------------
	
		# Colors
	
	----------------------------------------*/
	
	/* base */
	/* added inline @ html */
	/* --color-50: var(--blue-50);
	--color-100: var(--blue-100);
	--color-200: var(--blue-200);
	--color-300: var(--blue-300);
	--color-400: var(--blue-400);
	--color-500: var(--blue-500);
	--color-600: var(--blue-600); */

	/* -- saturation mods */
	/* --c-0: var(--blue-50);
	--c-700: var(--blue-700);
	--c-800: var(--blue-800);
	--c-900: var(--blue-900);
	--c-950: var(--blue-950); */
	
	--color-0: color-mix(in hsl, var(--c-0) 50%, #fff); /* inverse scale, 80 = 20% desaturate */
	--color-700: color-mix(in hsl, var(--c-700) 70%, #222);
	--color-800: color-mix(in hsl, var(--c-800) 60%, #222);
	--color-900: color-mix(in hsl, var(--c-900) 40%, #000);
	--color-950: color-mix(in hsl, var(--c-950) 30%, #000);
	--color-1000: color-mix(in hsl, var(--c-950) 20%, #000);

	/* generate secondary colors */
	--color-degree: 180;
	--color-secondar-50: color-mix(in hsl, var(--c-50) 50%, #fff);
	
	
	/* dims */
	--opacity-1: 0.7;
	--opacity-2: 0.5;
	--opacity-3: 0.3;
	--opacity-4: 0.1;
	--opacity-5: 0.07;
	--opacity-6: 0.04;
	
	--dim-color: 0;
	
	--color-dim-1: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-1));
	--color-dim-2: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-2));
	--color-dim-3: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-3));
	--color-dim-4: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-4));
	--color-dim-5: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-5));
	--color-dim-6: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-6));
	--color-dim: var(--color-dim-1);

			

	/*----------------------------------------
	
		# Color Copies for replacements
	
	----------------------------------------*/

	--c0: var(--color-0);
	--c50: var(--color-50);
	--c100: var(--color-100);
	--c200: var(--color-200);
	--c300: var(--color-300);
	--c400: var(--color-400);
	--c500: var(--color-500);
	--c600: var(--color-600);
	--c700: var(--color-700);
	--c800: var(--color-800);
	--c900: var(--color-900);
	--c950: var(--color-950);
	--c1000: var(--color-1000);
	
	/* grays */
	--g0: var(--gray-0);
	--g50: var(--gray-50);
	--g100: var(--gray-100);
	--g200: var(--gray-200);
	--g300: var(--gray-300);
	--g400: var(--gray-400);
	--g500: var(--gray-500);
	--g600: var(--gray-600);
	--g700: var(--gray-700);
	--g800: var(--gray-800);
	--g900: var(--gray-900);
	--g950: var(--gray-950);
	--g1000: var(--gray-1000);
	
	
	/* ia: interactives */
	--ia-background: var(--color-500);
	--ia-foreground: var(--color-50);
	--ia-height: 5.4rem;
}

/* Secondary Colors: Auto Generate */
:root{
	--col: '--amber';
	--color-secondary-50: var(--yellow-50);
	--color-secondary-100: var(--yellow-100);
	--color-secondary-200: var(--yellow-200);
	--color-secondary-300: var(--yellow-300);
	--color-secondary-400: var(--yellow-400);
	--color-secondary-500: var(--yellow-500);
	--color-secondary-600: var(--yellow-600);
	--color-secondary-700: var(--yellow-700);
	--color-secondary-800: var(--yellow-800);
	--color-secondary-900: var(--yellow-900);
	--color-secondary-950: var(--yellow-950);
}


/* specify spefics */
:root {
	--color-thead: var(--color-500);
	--color-hover: var(--color-100);
	--color-selected: var(--color-secondary-300);
	--color-alt-row: var(--gray-100);
	--color-tfoot: var(--color-200);

	--color-tag: var(--color-400);
	--color-tag-alt: var(--color-50);
	--color-tag-off: var(--color-0);
	
	/* vertical highlight */
	--color-highlight: var(--color-100);
	--color-highlight-th: var(--color-600);
	
	/* text colors */
	--color-sort-arrow: var(--color-200);
	--color-negative: var(--red-600);
	--color-links: var(--color-600);
}


:root [data-theme="dark"] {

	/* dims */
	--dim-color: 255;
	--color-dim-1: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-1));
	--color-dim-2: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-2));
	--color-dim-3: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-3));
	--color-dim-4: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-4));
	--color-dim-5: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-5));
	--color-dim-6: rgba(var(--dim-color), var(--dim-color), var(--dim-color), var(--opacity-6));
	
	/* colors -- inverse */
	--color-0: var(--c1000);
	--color-50: var(--c950);
	--color-100: var(--c900);
	--color-200: var(--c800);
	--color-300: var(--c700);
	--color-400: var(--c600);
	--color-500: var(--c500);
	--color-600: var(--c400);
	--color-700: var(--c300);
	--color-800: var(--c200);
	--color-900: var(--c100);
	--color-950: var(--c50);
	--color-1000: var(--c0);
}


/* dark defaults */
html [data-theme="dark"]
{
	/* --color-highlight: color-mix(in hsl, var(--color-500) 10%, transparent); */
	--color-highlight: color-mix(in hsl, var(--color-900) 20%, transparent);
	--color-alt-row: rgba(255,255,255,0.05);
	--color-hover: color-mix(in hsl, var(--color-500) 20%, transparent);
	--color-selected: var(--color-700);
	--color-links: var(--color-800);
	--color-negative: var(--color-700);
	--color-tfoot: var(--color-200);
	--color-tag: var(--color-500);
	--color-tag-off: var(--color-50);

	--color-dim: rgba(255,255,255,0.6);
	--gray-400: rgba(255,255,255,0.4);

	#out th { color: var(--color-950); }
	.select option { 
		color: var(--color-900) !important;
		background: var(--color-0) !important;
	}

	.box {
		--color-dim: rgba(255,255,255,0.7);
		.color-dim { color: var(--color-dim); }
		color: white;
		b,i,p { color: currentColor; }
	}

	.box:not(.box:has(.negative)){
		background: var(--color-200);
	}
	.box:has(.negative){
		background-color: var(--color-500);
	}

	button, .btn { color: var(--color-950); }
	button.outline, btn.outline {
		background: none !important;
		--col: var(--color-700);
		&.red { --col: var(--red-300); }
		color: var(--col);
		border-color: var(--col);
	}
}


[data-theme="pink"]{
	--color-thead: var(--pink-500);
	--color-selected: var(--violet-400);

	[data-theme="dark"]{
		--color-links: var(--color-900);
	}
}

[data-theme="emerald"]{
	--color-hover: var(--slate-200);
	--color-selected: var(--orange-400);
	--color-links: var(--color-700);
	--color-tfoot: var(--color-200);

	--color-tag: var(--color-500);
	--color-tag-alt: var(--color-0);
	--color-tag-off: var(--color-50);
	
	
	[data-theme="dark"]{
		--color-links: var(--color-900);
		--color-tfoot: var(--color-200);
		--color-highlight: color-mix(in hsl, var(--color-900) 20%, transparent);
		.box:has(.negative){
			background-color: var(--color-400);
		}
	}
}

[data-theme="slate"]{
	--color-hover: var(--slate-200);
	--color-selected: var(--slate-500);
	[data-theme="dark"]{
		--color-negative: var(--color-700);
	}
}


/*----------------------------------------

	# Large defaults
	
----------------------------------------*/

html { font-size: 62.5%; }
@media(max-width: 700px){

	html {
		font-size: 50%;
		.container { padding: 0 !important; }
		body { padding: 3%; }
		section:first-of-type .grid { display: block !important; }
	}

	#list-select { gap: var(--spacing) !important; grid-template-columns: 1fr !important; }
	#list-edit .grid { grid-template-columns: 1fr !important; }
}

body, html { min-height: 100svh; overflow-x: hidden; }
body {
	color: var(--color-1000);
	background: var(--color-0);
	font-family: 'InterVariable', sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1, 'zero' 0, 'salt' 0; /* fix for Chrome */
	font-size: var(--font-size);
	overflow-x: hidden;
}

/* slashed zero on inputs and in tables */
.slashed_zero, table, input, select {
	font-feature-settings: 'liga' 1, 'calt' 1, 'zero' 1, 'salt' 0; /* fix for Chrome */
}

.container {
	max-width: var(--max-width);
	padding: 0 var(--spacing-xxl);
	margin: 0 auto;	
}

section {
	padding: var(--spacing-xxxl) 0;
	&.small { padding: var(--spacing-xxl) 0; }
	&.container { padding: var(--spacing-xxxl) var(--spacing-xxl); }
}

@media(max-width:600px){
	.container { padding: 0 10%; }
	section.container { padding: 10%; }
}



/*----------------------------------------

	# Typography	
	
----------------------------------------*/

h1 {
	margin: 0 0 var(--spacing);
	font-size: var(--font-size-xxxl);
	font-weight: 700;
}

h2 {
	font-size: var(--font-size-xxl);
	margin: 0 0 var(--spacing);
}

h3 {
	font-weight: 400;
	margin: 0 0 var(--spacing);
	display: block;
	font-size: var(--font-size-xl);
}

h4 {
	font-weight: 400;
	margin: 0 0 var(--spacing-s);
	font-size: var(--font-size-l);
}

h5 {
	font-size: var(--font-size);
	font-weight: 700;
	margin: 0 0 var(--spacing-s);
}


p { line-height: 1.5; margin-bottom: var(--spacing); }
p:last-of-type { margin-bottom: 0; }

a {
	text-underline-offset: var(--spacing-xs);
	color: var(--blue-600);
}

hgroup {
	margin: 0 0 var(--spacing-l);
	* { margin: 0; }
	p { font-size: var(--font-size); color: var(--color-dim-2); margin-top: var(--spacing-xs); }
}

.lead {
	font-size: var(--font-size-l);
	opacity: 0.7; margin-bottom: var(--spacing-s);
	margin-top: var(--spacing-xs);
}

sub { font-size: var(--font-size-xs) !important; }

ul, ol {
	list-style-position: inside;
	li { margin: 0 0 var(--spacing-xs); &:last-of-type { margin-bottom: 0; }}
}



/*----------------------------------------

	# Grid	

----------------------------------------*/

:root {
	--grid-columns: 5; /* max -- after this it becomes another row */
	--grid-min-width: 250px;
	--grid-gap: var(--spacing);
}


.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min-width), 100% / calc(var(--grid-columns) + 1))), 1fr));
	gap: var(--grid-gap);
}

.grid[data-columns] {

	/* define */
	&[data-columns="1"]{ --grid-columns: 1; }
	&[data-columns="2"]{ --grid-columns: 2; }
	&[data-columns="3"]{ --grid-columns: 3; }
	&[data-columns="4"]{ --grid-columns: 4; }
	&[data-columns="5"]{ --grid-columns: 5; }
	&[data-columns="6"]{ --grid-columns: 6; }

	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min-width), 100% / calc(var(--grid-columns) + 1))), 1fr));
}



/*----------------------------------------

	# Small + Helpers
	
----------------------------------------*/



i { font-style: normal; }

/* -- ruler spacers */
hr { height: 1px; border: none; margin: var(--spacing-xl) 0; border-bottom: thin solid currentColor;  opacity: 0.2; }
hr.large { margin: var(--spacing-xxl) 0; }
hr.transparent { opacity: 0; }

.flex-grid, .flex-list {
	display: flex;
	gap: var(--spacing-s);
	flex-wrap: wrap;
	max-width: 100%;
	&.vertical {
		flex-direction: column;
	}
}

/* spacers */
.mt { margin-top: var(--spacing) !important; }
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: var(--spacing-s) !important; }
.mt-l { margin-top: var(--spacing-l) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mt-xxl { margin-top: var(--spacing-xxl) !important; }
.mb { margin-bottom: var(--spacing) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-s { margin-bottom: var(--spacing-s) !important; }
.mb-l { margin-bottom: var(--spacing-l) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-xxl { margin-bottom: var(--spacing-xxl) !important; }

/* overflows */
.overflow-x-auto { max-width: 100%; overflow-x: auto; }
.overflow-y-auto { max-width: 100%; overflow-y: auto; }

/* dims */
.color-dim { color: var(--color-dim); }
.color-dim-1 { color: var(--color-dim-1); }
.color-dim-2 { color: var(--color-dim-2); }
.color-dim-3 { color: var(--color-dim-3); }
.color-dim-4 { color: var(--color-dim-4); }
.color-dim-5 { color: var(--color-dim-5); }
.color-dim-6 { color: var(--color-dim-6); }

/* opacity, general */
.opacity-1 { opacity: var(--opacity-1); }
.opacity-2 { opacity: var(--opacity-2); }
.opacity-3 { opacity: var(--opacity-3); }
.opacity-4 { opacity: var(--opacity-4); }
.opacity-5 { opacity: var(--opacity-5); }
.opacity-6 { opacity: var(--opacity-6); }


/* 	text, general */
.capitalize { text-transform: capitalize; }

/* states */
.hidden { display: none !important; }



 /*----------------------------------------
 
 	# Card
	
----------------------------------------*/

.card {
	padding: var(--spacing-l);
	position: relative;
}


 /*----------------------------------------
 
 	# Tables
	
----------------------------------------*/

table {
	border-collapse: collapse;
	text-align: left;
	width: 100%;
	td, th {
		padding: var(--spacing);
	}
	tbody tr { border-bottom: thin solid var(--color-dim-3); }
	thead {
		box-shadow: inset 0 0 0 50rem var(--color-thead);
		border-radius: var(--border-radius);
		th { color: var(--color-50); }
		th:last-of-type { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
		th:first-of-type { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); }
	}
}


 /*----------------------------------------
 
 	# Tags
	
----------------------------------------*/
 
.tag {
	--col: var(--color-tag);
	border: thin solid var(--col);
	color: var(--col);
	background-color: var(--color-tag-off);
	display: block;
	padding: calc(var(--spacing-s) / 2) calc(var(--spacing) / 1.5);
	border-radius: 20rem;
	font-size: var(--font-size-s);
	cursor: pointer;
	user-select: none;

	&.visible {
		background: var(--col);
		color: var(--color-tag-alt);
	}
}
	


/* -- aztest.specifics  */
#out {
	overflow-x: auto;
	border-radius: var(--border-radius);
}

#out table {

	.red {
		color: var(--color-negative);
	}

	.pct:after { content: '%'; }

	th { cursor: pointer; white-space: nowrap; user-select: none; }
	a {
		text-decoration: none;
		display: block;
	}

	th[data-sorted-direction="descending"], th.sort-desc {
		&:after {
			border: solid var(--color-sort-arrow);
			content: "";
			display: inline-block;
			margin-left: var(--spacing-s);
			vertical-align: middle;
			border-width: 0 3px 3px 0;
			margin-top: -6px;
			transform: rotate(45deg);
			height: 8px;
			width: 8px;
		}
	}

	th[data-sorted-direction="ascending"], th.sort-asc {
		&:after {
			border: solid var(--color-sort-arrow);
			content: "";
			display: inline-block;
			margin-left: var(--spacing-s);
			vertical-align: middle;
			border-width: 0 3px 3px 0;
			margin-top: 6px;
			transform: rotate(-135deg);
			height: 8px;
			width: 8px;
		}
	}

	tbody tr {
		border: 0;
	}

	tbody tr:nth-child(even){
		box-shadow: inset 0 0 0 50rem var(--color-alt-row);
		border-radius: var(--border-radius);
		border: 0; 
	}

	td.row-highlight {
		background: color-mix( in hsl, var(--color-highlight) 40%, transparent);
	}
	
	th.row-highlight {
		background: var(--color-highlight-th);
	}

	tbody tr:hover {
		box-shadow: inset 0 0 0 50rem var(--color-hover);
	}

	tbody tr.selected {
		--col: var(--color-selected);
		box-shadow: inset 0 0 0 50rem color-mix(in hsl, var(--col) 20%, transparent);
		td.row-highlight {
			box-shadow: inset 0 0 0 50rem color-mix(in hsl, var(--col) 20%, transparent);
		}
	}

	tfoot tr {
		box-shadow: inset 0 0 0 50rem var(--color-tfoot);
		font-weight: 500;
		td { background: none !important; }
		border-radius: var(--border-radius);
	}

	.name {
		white-space: nowrap;
		overflow: hidden;
		max-width: 300px;
		text-overflow: ellipsis;
	}

} /* #out table */

#out table td.name:has(a) {
	padding: 0; /* collapse for td to later put back on for <a> */
	max-width: auto !important;
}


#out .name a {
	display: block;
	text-decoration: none;
	padding: var(--spacing);	
	color: var(--color-links);

	overflow: hidden;
	text-overflow: ellipsis;
	
	&:hover {
		text-decoration: underline;
	}
}

@media (max-width: 500px) {
	#out table {
		/* reset to allow multi-line names */
		.name {
			max-width: 200px;
			white-space: normal;
			overflow: visible;
		}
	}
}



/*----------------------------------------

	# Buttons and forms
	
----------------------------------------*/

.btn, input, button, .select {
	--height: var(--ia-height);
	--padding-inputs: calc(var(--height) / 2);
	display: inline-flex;
	align-items: center;
	height: var(--height);
}

label { display: inline-flex; align-items: center; gap: var(--spacing-s); }
fieldset { border: 0; }

/* inputs -- regular */
button, .btn {
	border-radius: var(--border-radius);
	border: thin solid var(--gray-200);
	padding: 0 var(--padding-inputs);
	background: var(--color-500);
	cursor: pointer;
	
	&:focus, &:active  {
		border-color: var(--color-500);
		outline: var(--color-500) solid 2px;
		border-color: transparent;
	}
}

.select, input:not([type="checkbox"]):not([type="radio"]){
	--border-col: var(--gray-400);
	border: thin solid var(--border-col);

	padding: 0 var(--padding-inputs);
	border-radius: var(--border-radius);
	outline: 0;
	background: var(--color-0);
	color: var(--color-1000);

	&::placeholder {
		color: var(--gray-400);
		font-style: italic;
	}

	select {
		appearance: none;
		background: none;
		padding: 0 var(--padding-inputs);
		border-radius: var(--border-radius);
		color: currentColor;
		height: 100%;
		width: 100%;
		border: 0;
		&:focus, &:active { border: 0; outline: 0; }
	}

	&:focus, &:active, &:has(select:focus){
		border-color: var(--color-500);
		outline: var(--color-500) solid 2px;
		border-color: transparent;
	}
}

/* -- filled per default */
button, .btn {
	&.red { --color-500: var(--red-500); --color-0: white; }

	background-color: var(--color-500);
	border-color: var(--color-500);
	color: var(--color-0);
	outline: 0;
	&:hover, &:focus { background: color-mix(in hsl, var(--color-500) 90%, #fff); }

	&.outline {
		background-color: var(--color-0);
		color: var(--color-500);
		&:hover {background:var(--color-0)}
		&:focus, &:active {
			background: var(--color-0);
			outline: var(--color-500) solid 2px;
		}
	}
}


/* select specifics */
.select {
	padding: 0;
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
	select { cursor: pointer; }

	&:after {
		pointer-events: none;
		content: '\2193';
		font-weight: 500;
		position: absolute; right: var(--padding-inputs);
	}
	
}

/* switch */
label:has(input[type="checkbox"][role="switch"]) {
	
	/* defaults */
	--bg1: var(--gray-100);
	--bg2: var(--gray-300);
	--fg: var(--gray-50);
	--padding: var(--spacing-xs);
	--padding-half: calc(var(--padding) / 2);
	
	user-select: none;
	cursor: pointer;
	display: inline-flex;
	gap: var(--spacing-xs);
	
	input {
		
		--height: calc(var(--font-size) * 1.5);
		--width: calc(var(--height) * 2);
		--ball-width: calc(var(--height) - var(--padding));
		
		/* track */
		all: unset;
		background: var(--bg2);
		border: thin solid var(--fg);
		
		min-width: var(--width);
		height: var(--height);
		display: inline-block;
		position: relative;
		border-radius: var(--height);
		margin-right: var(--spacing-xs);
		
		/* ball */
		&::before {
			background: var(--fg);
			height: var(--ball-width);
			width: var(--ball-width);
			position: absolute; content: "";
			top: var(--padding-half);
			right: calc(100% - var(--padding-half) - var(--ball-width));
			transition: all var(--transition-time-s) var(--ease-out);
			border-radius: 50%;
		}
	}
	
	/* checked state */
	input:checked {
		--fg: var(--color-0);
		--bg2: var(--color-500);
		&::before {
			 right: var(--padding-half);
		}
	}
	
}


/*
	# Lists
*/

#list-edit {
	background: var(--color-100);
	border: thin solid var(--color-500);
	padding: var(--spacing-xl);
	border-radius: var(--border-radius);
}

/*
	# Small stuff
*/

.red { color: var(--red-500); }
.green { color: var(--green-500); }

.fade-loading, .fade-load, .blink, .fade-blink {
	animation: fade-loading alternate 1s linear infinite;
	opacity: 0.5;
}

@keyframes fade-loading {
	0%   { opacity: 0; }
	50%  { opacity: 1; }
	100% { opacity: 1; }
}

#errors {
	padding: var(--spacing-l);
	background: var(--red-500);
	color: var(--red-50);
	position: relative;
	border-radius: var(--border-radius);
	.close {
		position: absolute; 
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		font-size: 200%;
		width: 40px; height: 40px;
		cursor: pointer;
		z-index: 10;
		&:hover { opacity: .8; }
	}
	p { line-height: 1.45; }
}


.box {
	padding: var(--spacing-xl);
	background: var(--color-100);
	border-radius: var(--border-radius);
	
	background: var(--red-500);
	color: var(--red-50);
	
	hgroup h3 {
		font-weight: bold;
	}
	hgroup {
		margin-bottom: var(--spacing);
	}
	hgroup p {
		color: var(--red-200);
	}
	
	small, .color-dim {
		color: var(--red-100);
	}
	
	b {
		font-size: 150% !important;
	}
	
	big {
		font-size: var(--font-size-xl);
		line-height: 1.25;
		small { font-size: var(--font-size-s); }
	}
	
	&:has(.positive){
		background: var(--color-500);
		color: var(--color-50);
		.color-dim { color: var(--color-100); }
		p { color: var(--color-200); }
		b { color: var(--color-0); }
	}
}