/*
 * dashboard.css — the shared performance dashboard: metric cards + run history.
 */
.dashboard-mount { position: sticky; top: 82px; }

.dashboard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.dashboard-head h3 {
  margin: 0; font-family: var(--mono); font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 9px;
}
.dashboard-head h3::before { content: ''; width: 7px; height: 7px; background: var(--accent); border-radius: 1px; }
.dashboard-status { font-family: var(--mono); font-size: .74rem; color: var(--text-dim); text-align: right; }

.dashboard-empty {
  color: var(--text-faint); font-family: var(--mono); font-size: .82rem;
  padding: 26px 0; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius);
}

.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric-card {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.metric-card--accent {
  background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}
.metric-value {
  font-family: var(--mono);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
  word-break: break-word;
}
.metric-card--accent .metric-value { color: var(--accent); }
.metric-label {
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 7px;
}

.history { margin-top: 20px; }
.history-title {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; margin-bottom: 10px;
}
.history-title span { color: var(--text-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.history-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .78rem; }
.history-table th {
  text-align: left; color: var(--text-faint); font-weight: 500;
  padding: 7px 8px; border-bottom: 1px solid var(--border-strong);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
}
.history-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.history-table tr:last-child td { border-bottom: none; }
.history-table tbody tr:first-child td { color: var(--text); }
.history-table tbody tr:hover td { background: var(--surface-2); }