/*
	The charts of the Hublot design system (lot 17): BarChart, ColumnChart, LineChart. The marks wear
	the four chart hues (--c1 to --c4, hublot.css), the text wears the ink, never a hue. Thin marks,
	hairline solid gridlines, the end away from the baseline rounded; every value on hover and focus
	in the readout above the plot. Load after hublot.css.
*/

/* The hue of a series by its rank: the marks read it, the text never does. */
.chart-s1 { --series: var(--c1); }
.chart-s2 { --series: var(--c2); }
.chart-s3 { --series: var(--c3); }
.chart-s4 { --series: var(--c4); }

.chart {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	min-width: 0;
	font-variant-numeric: tabular-nums;
}

.chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	color: var(--ink2);
}

.chart-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.chart-swatch {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 2px;
	background: var(--series);
}

.chart-line-key {
	flex: none;
	width: 18px;
	height: 2px;
	background: var(--series);
}

.chart-readout {
	min-height: 1.5em;
	margin: 0;
	color: var(--ink);
	font-weight: 600;
}

/* ---------- horizontal bars ---------- */

.chart-bars {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.chart-bar-row {
	display: grid;
	grid-template-columns: minmax(96px, 220px) minmax(0, 1fr);
	gap: 12px;
	align-items: center;
}

.chart-bar-label {
	color: var(--ink);
	overflow-wrap: anywhere;
}

.chart-bar-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.chart-bar-track {
	position: relative;
	height: 14px;
}

.chart-bar {
	position: absolute;
	top: 1px;
	height: 12px;
	background: var(--series);
	border-radius: 0 4px 4px 0;
}

.chart-bar-negative {
	border-radius: 4px 0 0 4px;
}

.chart-bar-zero {
	position: absolute;
	top: -5px;
	bottom: -5px;
	width: 1px;
	background: var(--line-strong);
}

/* The target is taller than the mark: about 24px, the 2px gaps included. */
.chart-bar::before {
	content: "";
	position: absolute;
	inset: -6px 0;
	min-width: 12px;
}

.chart-bar-value {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- columns ---------- */

.chart-columns {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	border-bottom: 1px solid var(--line-strong);
}

.chart-reference {
	position: absolute;
	left: 0;
	right: 0;
	border-top: 1px solid var(--line-strong);
	pointer-events: none;
}

.chart-reference-label {
	position: absolute;
	left: 0;
	bottom: 2px;
	padding-right: 6px;
	background: var(--surface);
	color: var(--ink2);
	font-size: 14px;
}

.chart-column {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.chart-column-value {
	min-height: 22px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.chart-column-mark {
	width: min(24px, 100%);
	background: var(--c1);
	border-radius: 4px 4px 0 0;
}

.chart-column-names {
	display: flex;
	gap: 12px;
}

.chart-column-names > div {
	flex: 1 1 0;
	min-width: 0;
	color: var(--ink2);
	font-size: 14px;
	text-align: center;
	overflow-wrap: anywhere;
}

/* ---------- lines ---------- */

.chart-line-area {
	display: grid;
	grid-template-columns: 4.5em minmax(0, 1fr);
	gap: 8px;
	height: 220px;
}

.chart-y-axis {
	position: relative;
	color: var(--ink2);
	font-size: 13px;
}

.chart-y-axis > span {
	position: absolute;
	right: 0;
	transform: translateY(50%);
	white-space: nowrap;
}

.chart-plot {
	position: relative;
	min-width: 0;
}

.chart-plot > svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.chart-grid {
	fill: none;
	stroke: var(--line);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.chart-line {
	fill: none;
	stroke: var(--series);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.chart-crosshair {
	fill: none;
	stroke: var(--ink3);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.chart-dot {
	position: absolute;
	background: var(--series);
	width: 10px;
	height: 10px;
	border: 2px solid var(--surface);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.chart-end-label {
	position: absolute;
	transform: translateY(-140%);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
}

.chart-hit {
	position: absolute;
	top: 0;
	bottom: 0;
}

.chart-x-axis {
	position: relative;
	height: 1.5em;
	margin-left: calc(4.5em + 8px);
	color: var(--ink2);
	font-size: 13px;
}

.chart-x-axis > span {
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
}

.chart-x-axis > span:first-child {
	transform: none;
}

.chart-x-axis > span:last-child:not(:first-child) {
	transform: translateX(-100%);
}

/* ---------- hover and focus ---------- */

.chart-bar:hover,
.chart-bar:focus-visible,
.chart-column:hover .chart-column-mark,
.chart-column:focus-visible .chart-column-mark {
	filter: brightness(1.12);
}

.chart-bar:focus-visible,
.chart-column:focus-visible,
.chart-hit:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}