/* Panel — metrics grid. Page-specific: nothing else in the redesign uses this layout. */

.cn-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); border-bottom: 2px solid var(--color-divider); }
.cn-metric-cell { padding: 22px 20px; border-right: 1px solid var(--color-divider); }
.cn-metric-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.cn-metric-unit { margin-left: auto; font-size: 11px; color: var(--color-neutral-700); }
.cn-metric-big-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.cn-metric-big { font-family: var(--font-heading); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.cn-metric-big-label { font-size: 12px; color: var(--color-neutral-700); }
.cn-metric-line { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--color-divider); }
.cn-metric-line-label { font-size: 13px; }
.cn-metric-line-label.total { font-weight: 600; }
.cn-metric-line-label.alert { color: var(--color-accent-700); }
.cn-metric-line-value { margin-left: auto; font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.cn-metric-line-value.alert { color: var(--color-accent-700); }

.cn-metric-line-link { color: inherit; text-decoration: none; cursor: pointer; margin: 0 -20px; padding-inline: 20px; }
.cn-metric-line-link:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); text-decoration: none; }