/* Chart Panel component (`[lpos_chart]`, ChartPanel.php) -- own inline-SVG line/bar/donut engine.
   100% token-driven (every var() fallback below equals that token's canon :where(:root) value in
   console-tokens.css); series colors + gradients are set as SVG `style="..."` attributes in the
   PHP so var(--lpos-*) resolves through the normal CSS cascade. No-scrollbar law: the panel is a
   column flex box (head/body/legend) that fills its container and clips -- the SVG scales via
   viewBox + preserveAspectRatio, it never forces a scrollbar. Matches the .lpos-c-subpanel /
   .lpos-c-archive-card glass HUD language. */

.lpos-c-chart {
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-sm, 8px);
	height: 100%;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/* head row: title panel (reuses the shared .lpos-c-title-panel chrome) + the Sample chip. Only
   rendered by ChartPanel.php when there's a title or a Sample chip -- an untitled real chart
   never wastes vertical space on an empty header band. */
.lpos-c-chart__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lpos-gap, 12px);
}
.lpos-c-chart__title {
	flex: 1 1 auto;
	min-width: 0;
}
.lpos-c-chart__title h2 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* "Sample" chip -- same honest-demo-data convention as StatTile's __sample chip: a dashed muted
   pill, never mistaken for a live-data badge (which would use a solid accent fill). */
.lpos-c-chart__sample {
	flex: 0 0 auto;
	font: 600 var(--lpos-text-2xs, 12px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
	letter-spacing: var(--lpos-tracking-label, 0.08em);
	text-transform: uppercase;
	color: var(--lpos-muted, #A8B2C7);
	padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
	border: var(--lpos-border-width, 1px) dashed color-mix(in srgb, var(--lpos-muted, #A8B2C7) var(--lpos-border-alpha-2, 40%), transparent);
	border-radius: var(--lpos-radius-sm, 4px);
}

/* honest-empty note -- identical recipe to .lpos-c-archive-grid__empty. */
.lpos-c-chart__empty {
	margin: 0;
	padding: var(--lpos-space-sm, 8px) var(--lpos-space-md, 12px);
	color: var(--lpos-muted, #A8B2C7);
	font: 400 var(--lpos-text-sm, 14px) / 1.4 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
}

.lpos-c-chart__body {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* viewBox + preserveAspectRatio (set in the markup) does the scaling; width/height:100% lets the
   SVG claim exactly the body's box without ever overflowing it. */
.lpos-c-chart__svg {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	display: block;
}

/* legend: wraps, but never scrolls -- rows beyond what the panel's remaining height allows clip
   under the parent's overflow:hidden per the no-scrollbar law (same trade-off the rest of the
   console makes for fixed-size chrome). */
.lpos-c-chart__legend {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lpos-space-xs, 4px) var(--lpos-space-md, 12px);
	overflow: hidden;
}
.lpos-c-chart__legend-item {
	display: inline-flex;
	align-items: center;
	gap: var(--lpos-space-xs, 4px);
	min-width: 0;
	font: 500 var(--lpos-text-sm, 14px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink, #EAF2FB);
	white-space: nowrap;
}
.lpos-c-chart__swatch {
	width: var(--lpos-space-sm, 8px);
	height: var(--lpos-space-sm, 8px);
	border-radius: var(--lpos-radius-sm, 4px);
	flex: 0 0 auto;
}
.lpos-c-chart__legend-share {
	color: var(--lpos-muted, #A8B2C7);
	font-weight: 600;
}

/* Screen-reader-only data table -- the same numbers the SVG plots, in a real semantic <table>,
   kept out of the visual layout with the standard clip technique. Width/height/margin reuse
   --lpos-border-width (canon 1px) instead of a bare literal, per TOKEN LAW. */
.lpos-c-chart__sr {
	position: absolute;
	width: var(--lpos-border-width, 1px);
	height: var(--lpos-border-width, 1px);
	padding: 0;
	margin: calc(var(--lpos-border-width, 1px) * -1);
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	.lpos-c-chart__legend {
		gap: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
	}
}