.history-explorer .explorer-toolbar {
	flex-wrap:wrap;
}
.range-tabs button {
	padding:7px 10px;
	border:1px solid #30454f;
	border-radius:5px;
	background:#09151c;
	color:#84969e;
	font:700 .65rem/1 "IBM Plex Mono",monospace;
	cursor:pointer;
}
.range-tabs button:hover,
.range-tabs button:focus-visible { color:#fff; border-color:#4a6a77; }
.range-tabs button.active { color:#e9f9fd; border-color:#467083; background:#0f222b; }

.history-date-lookup {
	display:flex;
	align-items:center;
	gap:7px;
}
.history-date-lookup label {
	color:#748891;
	font-size:.7rem;
	font-weight:700;
}
.history-date-lookup input {
	padding:7px 9px;
	background:#07131a;
	border:1px solid #30454f;
	border-radius:5px;
	color:#dce5e8;
	font:600 .68rem/1 "IBM Plex Mono",monospace;
	color-scheme:dark;
}
.history-date-lookup button {
	padding:8px 10px;
	border:1px solid #467083;
	border-radius:5px;
	background:#10232c;
	color:#e9f9fd;
	font-size:.7rem;
	font-weight:750;
	cursor:pointer;
}

.history-chart-shell {
	position:relative;
	height:340px;
	margin-left:36px;
	border-left:1px solid #263842;
	border-bottom:1px solid #263842;
	overflow:visible;
	background:#09151c;
	touch-action:pan-y;
}
.history-band-bg {
	position:absolute;
	inset:0;
	display:grid;
	grid-template-rows:4fr 16fr 15fr 15fr 50fr;
	pointer-events:none;
}
.history-band-bg span { border-bottom:1px solid rgba(255,255,255,.025); }
.band-bg-extreme { background:rgba(216,60,98,.10); }
.band-bg-severe { background:rgba(255,90,74,.07); }
.band-bg-elevated { background:rgba(198,135,77,.055); }
.band-bg-heightened { background:rgba(155,146,95,.045); }
.band-bg-background { background:rgba(77,119,134,.035); }
.history-y-labels {
	position:absolute;
	left:-36px;
	top:0;
	bottom:0;
	width:30px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:flex-end;
	color:#728891;
	font:600 .59rem/1 "IBM Plex Mono",monospace;
	pointer-events:none;
}
.history-svg {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	overflow:visible;
	cursor:crosshair;
}
.history-real-line {
	fill:none;
	stroke:#e5eef0;
	stroke-width:1.6;
	vector-effect:non-scaling-stroke;
}
.history-provisional-line {
	stroke:#68d7ef;
	stroke-width:1;
	stroke-dasharray:5 5;
	opacity:.75;
	vector-effect:non-scaling-stroke;
}
.history-cursor {
	stroke:#a9bdc4;
	stroke-width:1;
	stroke-dasharray:2 3;
	opacity:.65;
	vector-effect:non-scaling-stroke;
}
.history-marker {
	fill:#ff5a4a;
	stroke:#071018;
	stroke-width:2;
	vector-effect:non-scaling-stroke;
}
.history-tooltip {
	position:absolute;
	top:14px;
	transform:translateX(-50%);
	min-width:140px;
	padding:9px 11px;
	border:1px solid #3a515c;
	border-radius:7px;
	background:rgba(6,16,23,.96);
	box-shadow:0 12px 30px rgba(0,0,0,.28);
	pointer-events:none;
	z-index:4;
}
.history-tooltip.align-right { transform:translateX(-100%); }
.history-tooltip.align-left { transform:none; }
.history-tooltip strong {
	display:inline-block;
	color:#fff;
	font:800 1rem/1 "IBM Plex Mono",monospace;
	margin-right:8px;
}
.history-tooltip span {
	color:#ff7b69;
	font:700 .63rem/1 "IBM Plex Mono",monospace;
	text-transform:uppercase;
}
.history-tooltip small {
	display:block;
	margin-top:6px;
	color:#81959d;
	font-size:.66rem;
	white-space:nowrap;
}
.history-error-message {
	position:absolute;
	inset:0;
	display:grid;
	place-items:center;
	padding:30px;
	color:#ff9b89;
	background:#09151c;
	text-align:center;
	font-size:.82rem;
	z-index:5;
}
.history-accessible-note {
	margin:10px 0 0;
	color:#71858e;
	font-size:.7rem;
}
.chart-axis {
	margin-left:36px;
	display:grid;
	grid-template-columns:1fr auto 1fr;
	gap:16px;
	align-items:center;
}
.chart-axis span:nth-child(2) {
	text-align:center;
	color:#66808a;
	font-size:.6rem;
}
.chart-axis span:last-child { text-align:right; }

@media(max-width:720px){
	.history-date-lookup { width:100%; align-items:flex-start; flex-wrap:wrap; }
	.history-date-lookup label { width:100%; }
	.history-date-lookup input { flex:1; min-width:0; }
	.history-chart-shell { height:290px; margin-left:30px; }
	.history-y-labels { left:-30px; width:25px; }
	.chart-axis { margin-left:30px; grid-template-columns:1fr 1fr; }
	.chart-axis span:nth-child(2) { display:none; }
}