:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #101828;
  color: #f8fafc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 2rem 1rem;
}

main {
  width: min(76rem, 100%);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid #344054;
  border-radius: 1rem;
  background: #1d2939;
  box-shadow: 0 1rem 3rem #0008;
}

button {
  border: 1px solid #98a2b3;
  border-radius: .55rem;
  padding: .65rem .9rem;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

button:focus-visible {
  outline: .2rem solid currentColor;
  outline-offset: .2rem;
}

button:disabled { cursor: progress; opacity: .65; }

#update-notice {
  margin-block: 1rem;
  padding: 1rem;
  border: 1px solid #98a2b3;
  border-radius: .75rem;
}

.diagnostics-shell {
  margin-top: 2rem;
  border-top: 1px solid #475467;
  padding-top: 1.25rem;
}

.diagnostic-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .75rem;
}

[data-diagnostic-status] {
  min-height: 1.5rem;
  margin-bottom: 1rem;
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.diagnostic-card {
  min-width: 0;
  border: 1px solid #475467;
  border-radius: .75rem;
  padding: 1rem;
  background: #101828;
}

.diagnostic-card h2 {
  margin: 0 0 .75rem;
  font-size: 1.05rem;
}

.diagnostic-card dl { margin: 0; }

.diagnostic-row {
  display: grid;
  grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.2fr);
  gap: .75rem;
  padding-block: .4rem;
  border-top: 1px solid #344054;
}

.diagnostic-row:first-child { border-top: 0; }
.diagnostic-row dt { font-weight: 700; }
.diagnostic-row dd { margin: 0; overflow-wrap: anywhere; }

[data-diagnostic-export] {
  max-height: 28rem;
  overflow: auto;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #475467;
  border-radius: .75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #101828;
}

@media (max-width: 42rem) {
  body { padding: 0; }
  main { border-radius: 0; border-inline: 0; }
  .diagnostic-row { grid-template-columns: 1fr; gap: .2rem; }
}