/**
 * MCP Insights - mcp-chart engine styles (doctrine Part 2). Generic, reusable across every Insights page
 * that declares a chart. Inherits the shared insights tokens (assets/insights-theme.css). Both viewports
 * designed deliberately. No black. No em/en dashes (this is CSS). No literal HTML-tag-shaped tokens.
 *
 * The engine draws everything inside a single canvas; the PAGE owns the control DOM (range tabs, metric
 * chips, toggles) and calls the engine API. These classes are the shared control kit so every migrated
 * page reads as one system.
 */

/* the canvas host: reserve the box height so there is zero layout shift while data loads (skeleton
   shimmer paints inside). Pages set the height via --mcp-chart-h or a modifier. */
.mcp-chart {
	position: relative;
	width: 100%;
	height: var(--mcp-chart-h, 420px);
	min-height: 220px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--ins-band);
}
.mcp-chart-canvas {
	display: block;
	width: 100%;
	height: 100%;
	/* pan-y = the VERTICAL-SCROLL ESCAPE: a vertical thumb-swipe on the canvas scrolls the PAGE (no scroll
	   trap), while the engine captures HORIZONTAL drags (pan) and 2-finger pinch (zoom) via the touchmove
	   directional-intent lock. Do not revert this to touch-action:none - that is the mobile scroll trap. */
	touch-action: pan-y;
	cursor: crosshair;
}
.mcp-chart--tall { --mcp-chart-h: 480px; }
.mcp-chart--short { --mcp-chart-h: 300px; }
.mcp-chart--mini { --mcp-chart-h: 140px; min-height: 120px; }

/* ---- shared control kit (range tabs, metric chips, toggles) ---- */
.mcp-chart-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}
.mcp-chart-controls-spacer { flex: 1 1 auto; }

.mcp-chart-tabs {
	display: inline-flex;
	gap: 3px;
	background: var(--ins-band);
	border: 1px solid var(--ins-edge);
	border-radius: 999px;
	padding: 3px;
}
.mcp-chart-tab {
	appearance: none;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--ins-muted);
	font: 600 .76rem/1 var(--ins-font);
	padding: 8px 13px;
	/* SLOT 20 prologue (0.81.0): the shared insights control kit sits at the 44px
	   tap-target baseline on EVERY viewport (the fleet-wide "40px controls" finding),
	   not only under 480px. Height is min-height so desktop rows do not visibly grow. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	white-space: nowrap;
}
.mcp-chart-tab:hover { color: var(--ins-strong); }
.mcp-chart-tab.is-on { background: var(--ins-purple); color: #fff; }

/* metric chips (bigger, labelled toggles) */
.mcp-chart-chips {
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
}
.mcp-chart-chip {
	appearance: none;
	cursor: pointer;
	font: 600 .78rem/1 var(--ins-font);
	color: var(--ins-muted);
	background: var(--ins-panel);
	border: 1px solid var(--ins-edge);
	border-radius: 999px;
	padding: 9px 14px;
	min-height: 44px; /* SLOT 20 prologue: shared 44px tap-target baseline */
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.mcp-chart-chip:hover { background: var(--ins-hover); color: var(--ins-strong); }
.mcp-chart-chip.is-on {
	color: #fff;
	background: var(--ins-purple);
	border-color: transparent;
	box-shadow: var(--ins-active-lift);
}
.mcp-chart-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }

/* a plain toggle button (log/linear, D/W handled by tabs) */
.mcp-chart-toggle {
	appearance: none;
	cursor: pointer;
	font: 600 .76rem/1 var(--ins-font);
	color: var(--ins-muted);
	background: var(--ins-panel);
	border: 1px solid var(--ins-edge);
	border-radius: 8px;
	padding: 8px 12px;
	min-height: 44px; /* SLOT 20 prologue: shared 44px tap-target baseline */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mcp-chart-toggle:hover { background: var(--ins-hover); }
.mcp-chart-toggle.is-on { color: var(--ins-strong); border-color: var(--ins-purple); }

/* a live readout strip that sits under the chart (analog line, hints) */
.mcp-chart-readout {
	margin: 10px 0 0;
	min-height: 20px;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--ins-muted);
}
.mcp-chart-readout b { color: var(--ins-strong); font-weight: 700; }
.mcp-chart-hint { font-size: .74rem; color: var(--ins-dim); }

@media (max-width: 480px) {
	/* 44px is now the shared baseline (above); on phones keep the same height but a
	   touch-comfortable horizontal pad so the pill hit area is a little wider. */
	.mcp-chart-tab { padding: 13px 13px; }
	.mcp-chart-chip { padding: 12px 13px; }
	.mcp-chart-toggle { padding: 12px 14px; }
}