/* Part of the component CSS split: one file per component.
   Loaded by views/layout.templ in cascade order after tokens.css.
   Component: see views/components/ (same base name). */

#footer-metrics {
	width: min(calc(100% - 3rem), var(--page-width));
	margin-inline: auto;
}

/* Metrics grid: each Metric is a tile. The grid auto-fits so tiles
   distribute evenly on any width; tile visibility follows priority
   classes (progressive disclosure — more readings as the screen grows). */
.footer-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	justify-items: center;
	text-align: center;
	gap: 1rem 1.5rem;
	padding: 1.25rem 0 1.5rem;
	border-top: 1px solid var(--panel-border);
	font: .8rem/1.4 var(--font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Priority classes (set by the Metric component):
   - metric-essential (priority 1): always visible
   - default (priority 2): hidden only on the narrowest tier
   - metric-wide (priority 3): visible from the tablet tier up */
.metric-wide { display: none; }

@media (min-width: 48rem) {
	.metric-wide { display: inline-flex; }
}

@media (max-width: 30rem) {
	/* Narrowest tier: only essential readings (priority 1). */
	.metric:not(.metric-essential) { display: none; }
	.footer-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Metric tile: label stacked over value, centered at every screen size
   so the grid stays balanced as readings appear/disappear. */
.metric {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
}

.metric-label {
	color: var(--panel-fg-muted);
	font: 700 .62rem/1 var(--font-mono);
	letter-spacing: .13em;
}

/* Dedicated instrument-panel font stack, distinct from the footer's
   mono. Tabular figures keep columns steady as values update live. */
.metric-value {
	color: var(--panel-fg);
	font: 700 .95rem/1 "SF Mono", "SFMono-Regular", ui-monospace, "JetBrains Mono", Consolas, monospace;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

.metric-unit {
	font-style: normal;
	font-weight: 700;
	font-size: .72rem;
	/* SF Mono lacks a Greek-mu (U+03BC) glyph and falls back to a
	   system font that renders it M-like. Menlo/Consolas carry the real
	   Greek mu, so the unit stack leads with them. text-transform:none
	   keeps the lowercase mu: uppercase would turn it into Greek capital
	   Mu (U+039C), which is visually identical to Latin M. */
	font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
	text-transform: none;
	color: var(--accent);
	margin-left: .2rem;
	letter-spacing: .05em;
}

/* HIG legibility: the strip is a live instrument panel, so values must
   stay readable at arm's length on every screen. Fluid type scales the
   value with the viewport (floor 1rem ≈ iOS body, ceiling 1.15rem);
   labels never drop below .68rem. */
.metric-value {
	font-size: clamp(1rem, .9rem + .35vw, 1.15rem);
}

.metric-label {
	font-size: clamp(.68rem, .64rem + .15vw, .75rem);
}

.metric-unit {
	font-size: clamp(.75rem, .7rem + .2vw, .82rem);
}