:root {
  color-scheme: light dark;
  --fg: #1a1a1a;
  --bg: #fafafa;
  --panel: #ffffff;
  --border: #ddd;
  --accent: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e6e6e6;
    --bg: #121212;
    --panel: #1c1c1c;
    --border: #333;
  }
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  padding: 1.5rem;
  max-width: 860px;
  margin-inline: auto;
}
.hero p { max-width: 60ch; }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-block: 1rem;
}
.panel h2 { margin-top: 0; font-size: 1.05rem; }
button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.link {
  background: none;
  color: var(--accent);
  padding: 0;
  text-decoration: underline;
  font-size: 0.85rem;
}
label { display: block; margin-block: 0.5rem; font-size: 0.85rem; }
input, select, textarea {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
}
.error { color: #dc2626; }
.ok { color: #16a34a; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.9rem; }
.kv dt { font-weight: 600; }
.endpoints, .dlq { list-style: none; padding: 0; }
.endpoints li, .dlq li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.pill {
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: white;
}
.pill.breaker-closed { background: #16a34a; }
.pill.breaker-open { background: #dc2626; }
.pill.breaker-half_open { background: #d97706; }
table.timeline { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.timeline th, table.timeline td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); }
.metrics { display: flex; gap: 1.5rem; }
.metrics div { text-align: center; }
.metrics span { display: block; font-size: 1.4rem; font-weight: 700; }
.metrics small { color: #888; }
pre { white-space: pre-wrap; word-break: break-all; font-size: 0.8rem; }

/* A deferred row is not a delivery attempt -- an open circuit breaker declined to send, so
   no request was made and no attempt was recorded. Muted so the eye skips them when
   scanning for real outcomes, rather than counting them as failures. */
.timeline tr.deferred {
  opacity: 0.55;
  font-style: italic;
}