/* ── Dashboard ───────────────────────────────────────────────────────────── */

.mode-switch { display: inline-flex; gap: 8px; align-items: center; }
.mode-pill {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 700;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}
.mode-pill-active {
  color: var(--text-1);
  border-color: color-mix(in srgb, var(--interactive) 70%, var(--border) 30%);
  background: color-mix(in srgb, var(--interactive) 26%, transparent);
}
.mode-switch button.mode-pill {
  cursor: pointer;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}
.metrics-tab-panel {
  display: grid;
  gap: 16px;
}
.metrics-subpanel {
  box-shadow: none;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: center; row-gap: 10px; }
.dash-nav-head { display: flex; align-items: center; gap: 8px; }
.dash-nav-head h1 { margin: 0; }
.bot-card-trigger { display: flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; background: none; border: none; padding: 0; justify-self: end; }
.bot-card-trigger .chevron { transition: transform 200ms ease; }
.bot-card-identity { justify-self: end; font-size: 14px; }
.dash-cols .btn-group { display: none; grid-column: 2; justify-self: end; }
.dash-cols.controls-open .btn-group { display: flex; }
.dash-cols.controls-open .chevron { transform: rotate(180deg); }
.dash-cols .mode-switch { align-self: center; }
.dash-bot-select { margin: 0; max-width: 195px; }
#dashboard-controls-help { margin-top: 16px; }

.recalibrating { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--text-muted); border-top-color: var(--accent, #4f8ef7); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 490px) {
  .grid-kpi { grid-template-columns: 1fr; }
  .bot-card-identity { grid-column: 1 / -1; justify-self: start; }
  .bot-card-trigger .pill { background: none; border: none; padding: 0; font-size: inherit; }
  .dash-cols .btn-group { grid-column: 1 / -1; justify-self: center; }
}