:root {
	--bar-light: #ccc;
	--bar-dark: #474747;
}

#graph-wrapper{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1rem;
	padding-top: 1.5rem;
	}

#graph-wrapper h3{ 
	font-size: 1rem;
	padding: 0 0 .5rem 0;
	font-weight: 500;
	}

#graph-wrapper .graph{
	padding-top: .25rem;
	position: relative;
	display: grid;
	grid-template-columns: min-content min-content auto;
	grid-template-areas:
	    "y1 y2 canvas"
	    "y1 empty x1"
	    "y1 empty x2";
	}

#graph-wrapper .y-title{
	grid-area: y1;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
  	text-orientation: mixed;
	width: 100%;
	text-align: center;
	}
#graph-wrapper .x-title{
	text-align: center;
	grid-area: x2;
	}

#graph-wrapper .y-axis{
	grid-area: y2;
	display: flex;
	flex-direction: column-reverse;
	text-align: right;
	justify-content: space-between;
	line-height: 1;
	}
#graph-wrapper .x-axis{
	grid-area: x1;
	display: flex;
	justify-content: space-between;
	width: 100%;
	line-height: 1;
	}

#graph-wrapper canvas{ 
	grid-area: canvas;
	aspect-ratio: 5/3;
	outline: 1.5px solid var(--color-grey-dark);
	width: 100%;
	background-image: url('../images/graph-bg.svg');
	background-size: cover;
	transform: scale(.95);
	}

#graph-wrapper figcaption{ font-weight: bold; }



@media print, (min-width: 800px) {

	#graph-wrapper{ 
		padding-top: 2rem;
		gap: 1rem 3rem; 
		}

	#graph-wrapper h3{ font-size: 1.15rem; }

	#graph-wrapper .graph{ padding-top: .75rem; }
	
}


@media print{ 

  #graph-wrapper{
    width: 100%;
    grid-template-columns: 1fr 1fr;
    }

  #graph-wrapper canvas { 
    -webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}

}


@media screen and (forced-colors: active) {
	
	:root {
		--bar-light: Highlight;
		--bar-dark: CanvasText;
		}

}