/* =====================
   STATUS CARD — one monitored endpoint
   ===================== */

.status-card {
  gap: var(--gap-base);
  padding: var(--padding-card);
  border-left: var(--border-width) solid var(--status-color);
  transition: border-color var(--transition-base);
}

.status-card-top {
  gap: var(--gap-md);
}

.status-card-head {
  gap: var(--gap-sm);
}

.status-card-name {
  margin: 0;
  font-size: var(--h5-font-size);
  letter-spacing: var(--tracking-card);
}

.status-card-url {
  font-size: var(--font-size-sm);
}

.status-card-badge {
  font-size: var(--font-size-2xs);
  border-color: var(--status-color);
  color: var(--status-color);
}

/* ── Metrics ── */
.status-card-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--status-metric-min-width), 1fr));
  gap: var(--gap-md);
  margin: 0;
}

.status-metric {
  gap: var(--gap-3xs);
}

.status-metric dt {
  font-size: var(--font-size-2xs);
}

.status-metric dd {
  margin: 0;
  font-size: var(--font-size-md);
}

/* ── Error line ── */
.status-card-error {
  margin: 0;
  font-size: var(--font-size-sm);
}

.status-card-error:empty {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 560px) {
  .status-card { padding: var(--space-inner); }

  .status-card-top {
    flex-direction: column;
    align-items: flex-start;
  }
}