/* KPI-плитки (ui.js: kpiCard) — дополнения к .kpi-card из card.css: пояснение .hint, тон плитки (полоса слева —
   второй сигнал помимо цвета числа), плитка-ссылка. Сетка — .grid.kpi из card.css. */
.kpi-card { --kpi-tone: var(--border); position: relative; border-left: calc(var(--border-w) + 2px) solid var(--kpi-tone); }
.kpi-card .hint { margin-top: var(--s1); color: var(--fg-muted); font-size: var(--fs-xs); display: flex; align-items: center; gap: var(--s1); }
.kpi-card .hint .icon { width: 12px; height: 12px; }
.kpi-card.tone-accent { --kpi-tone: var(--accent); }
.kpi-card.tone-success { --kpi-tone: var(--success); }
.kpi-card.tone-warn { --kpi-tone: var(--warn); }
.kpi-card.tone-danger { --kpi-tone: var(--danger); }
.kpi-card.tone-danger .value { color: var(--danger); }
.kpi-card.tone-warn .value { color: var(--warn); }
a.kpi-card { display: block; color: inherit; text-decoration: none; transition: background var(--dur-fast) var(--ease); }
a.kpi-card:hover { background: var(--surface-2); }