.diagnostics {
  padding-top: var(--space-2);
}

.diagnostics__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* The server group spans the full width — it has the most rows */
.diagnostics__grid > .diag-group:last-child {
  grid-column: 1 / -1;
}

.diag-group,
.diag-log {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.diag-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.diag-tag {
  padding: 0 var(--space-1);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-subtle);
}

.diag-tag--inline {
  margin-left: var(--space-2);
}

/* Fictional data gets the amber "pending" tone so it never reads as a real measurement */
.diag-tag--simulated {
  border-color: color-mix(in srgb, var(--color-status-pending) 55%, transparent);
  color: var(--color-status-pending);
}

/* Label / value rows */
.diag-list {
  display: grid;
}

.diag-item {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding: var(--space-1) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--text-sm);
}

.diag-item:last-of-type {
  border-bottom: 0;
}

.diag-item dt {
  color: var(--color-text-subtle);
}

.diag-item dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.diag-muted {
  color: var(--color-text-subtle);
}

.diag-dot {
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: var(--space-2);
  border-radius: var(--radius-full);
  vertical-align: 0.1em;
  background: var(--color-text-subtle);
}

.diag-dot--online {
  background: var(--color-status-online);
}

.diag-dot--pending {
  background: var(--color-status-pending);
}

.diag-dot--offline {
  background: var(--color-status-offline);
}

.diag-tools {
  display: grid;
  gap: 2px;
}

.diag-tools strong {
  font-weight: var(--weight-medium);
}

.diag-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  margin-left: calc(-1 * var(--space-3));
  font-size: var(--text-xs);
}

/* ---------- Log ---------- */

.diag-log {
  margin-top: var(--space-3);
}

.diag-log__intro {
  font-size: var(--text-xs);
}

.diag-log__list {
  display: grid;
  gap: 2px;
  margin-top: var(--space-2);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--text-xs);
}

.diag-log__list--full {
  max-height: 16rem;
  overflow-y: auto;
  padding-right: var(--space-2);
}

.diag-log__line {
  display: grid;
  grid-template-columns: 4.5rem 8.5rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: 2px 0;
}

.diag-log__time {
  color: var(--color-text-subtle);
}

.diag-log__level {
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.diag-log__line--warning .diag-log__level {
  color: var(--color-status-pending);
}

.diag-log__line--error .diag-log__level {
  color: var(--color-status-offline);
}

.diag-log__message {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text);
}

.diag-log__more {
  margin-top: var(--space-2);
}

.diag-log__more summary {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.diag-log__more summary:hover {
  color: var(--color-text);
}

.diag-log__more[open] summary {
  color: var(--color-text);
}

/* ---------- Responsive ---------- */

@media (max-width: 52rem) {
  .diagnostics__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .diag-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .diag-log__line {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .diag-log__message {
    grid-column: 1 / -1;
  }
}