:root {
  --nh48-state-loading: var(--nh48-status-loading, #38bdf8);
  --nh48-state-empty: #94a3b8;
  --nh48-state-error: var(--nh48-status-error, #fb7185);
  --nh48-state-stale: var(--nh48-status-stale, #f59e0b);
  --nh48-state-partial: var(--nh48-status-partial, #facc15);
  --nh48-state-unavailable: var(--nh48-status-unavailable, #a78bfa);
  --nh48-state-offline: #67e8f9;
}

.nh48-state {
  --nh48-state-accent: var(--nh48-state-loading);
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  width: 100%;
  min-width: 0;
  margin-block: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--text, #e6eef8);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--nh48-state-accent) 10%, transparent), transparent 58%),
    var(--panel, rgba(15, 23, 42, 0.94));
  border: 1px solid color-mix(in srgb, var(--nh48-state-accent) 44%, transparent);
  border-left: 4px solid var(--nh48-state-accent);
  border-radius: var(--nh48-radius-lg, 18px);
  box-shadow: var(--nh48-shadow-1, 0 14px 36px rgba(0, 0, 0, 0.2));
}

.nh48-state[hidden] {
  display: none;
}

.nh48-state[data-nh48-state="loading"] { --nh48-state-accent: var(--nh48-state-loading); }
.nh48-state[data-nh48-state="empty"] { --nh48-state-accent: var(--nh48-state-empty); }
.nh48-state[data-nh48-state="error"] { --nh48-state-accent: var(--nh48-state-error); }
.nh48-state[data-nh48-state="stale"] { --nh48-state-accent: var(--nh48-state-stale); }
.nh48-state[data-nh48-state="partial"] { --nh48-state-accent: var(--nh48-state-partial); }
.nh48-state[data-nh48-state="unavailable"] { --nh48-state-accent: var(--nh48-state-unavailable); }
.nh48-state[data-nh48-state="offline"] { --nh48-state-accent: var(--nh48-state-offline); }

.nh48-state__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.8rem;
}

.nh48-state__indicator {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  color: #07111d;
  background: var(--nh48-state-accent);
  border-radius: 999px;
  font-weight: 900;
  line-height: 1;
}

.nh48-state__spinner {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: nh48-state-spin 0.85s linear infinite;
}

.nh48-state__eyebrow,
.nh48-state__title,
.nh48-state__explanation,
.nh48-state__meta,
.nh48-state__diagnostics {
  margin: 0;
}

.nh48-state__eyebrow {
  color: var(--nh48-state-accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
}

.nh48-state__title {
  margin-top: 0.2rem;
  color: inherit;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.2;
}

.nh48-state__explanation {
  color: var(--muted, #a9b8c9);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.nh48-state__context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.65rem;
  margin: 0;
}

.nh48-state__context > div {
  min-width: 0;
  padding: 0.7rem 0.8rem;
  background: color-mix(in srgb, var(--nh48-state-accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--nh48-state-accent) 20%, transparent);
  border-radius: var(--nh48-radius-sm, 10px);
}

.nh48-state__context dt {
  color: var(--muted, #a9b8c9);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nh48-state__context dd {
  margin: 0.25rem 0 0;
  color: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.nh48-state__meta {
  color: var(--muted, #a9b8c9);
  font-size: 0.85rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.nh48-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.nh48-state__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 0.95rem;
  color: var(--text, #e6eef8);
  background: color-mix(in srgb, var(--nh48-state-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--nh48-state-accent) 48%, transparent);
  border-radius: var(--nh48-radius-control, 999px);
  font: inherit;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.nh48-state__action:hover {
  background: color-mix(in srgb, var(--nh48-state-accent) 22%, transparent);
}

.nh48-state__action:focus-visible {
  outline: 3px solid var(--nh48-state-accent);
  outline-offset: 3px;
}

.nh48-state__diagnostics {
  padding-top: 0.75rem;
  color: var(--muted, #a9b8c9);
  border-top: 1px solid color-mix(in srgb, var(--nh48-state-accent) 22%, transparent);
  font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}

@keyframes nh48-state-spin {
  to { transform: rotate(1turn); }
}

@media (max-width: 420px) {
  .nh48-state__header { grid-template-columns: 1fr; }
  .nh48-state__indicator { width: 2.25rem; height: 2.25rem; }
  .nh48-state__actions { align-items: stretch; }
  .nh48-state__action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nh48-state__spinner { animation-duration: 2s; }
}

@media (forced-colors: active) {
  .nh48-state,
  .nh48-state__context > div,
  .nh48-state__action {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    forced-color-adjust: auto;
  }
  .nh48-state__indicator {
    color: Canvas;
    background: CanvasText;
  }
  .nh48-state__action:focus-visible { outline-color: Highlight; }
}