/**
 * dashboard-client/src/styles/session-gauges.css — Per-session context gauges (S40).
 *
 * Grid of compact gauges rendered on the Overview tab in place of the single
 * launcher ContextGauge. The launcher's own gauge is highlighted via
 * .session-gauge-self. Depends on .gauge-bar / .gauge-fill / .gauge-{green,
 * yellow,red} from overview-events.css + base.css tokens.
 */

.session-gauges-card {
	grid-column: 1 / -1;
}

/* Auto-sizing grid: columns stretch to fit content, wrapping as needed.
 * minmax(0, 1fr) with auto-fill lets the grid decide column widths based on
 * available space rather than forcing a fixed minimum. */
.session-gauges-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 16px;
}

.session-gauges-scroll {
	overflow-x: auto;
}

.session-gauge {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	min-width: 0; /* allow flex children to shrink below content size */
}

.session-gauge-self {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
	background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

.session-gauge-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	min-width: 0; /* allow label to shrink */
}

/* Repo/session label — auto-scales via clamp() and wraps if needed.
 * No truncation: the full label is always visible, font shrinks on
 * narrow containers. */
.session-gauge-label {
	font-size: clamp(11px, 1.1vw, 14px);
	font-weight: 600;
	line-height: 1.25;
	color: var(--text);
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.session-gauge-self .session-gauge-label {
	color: var(--accent);
}

.session-gauge-pct {
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.session-gauges-grid .gauge-bar {
	height: 12px;
}

.session-gauge-sub {
	margin: 0;
	font-size: clamp(12px, 1vw, 14px);
	font-weight: 500;
	color: var(--text);
}

.session-gauge-meta {
	margin: 0;
	font-size: clamp(10px, 0.85vw, 12px);
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.session-gauges-grid {
		grid-template-columns: 1fr;
	}
}