/* state_panel.css — the shared empty/blocked/failed component
   (macros/_state.html). Loaded globally like components.css: no theme
   scoping needed, every color is a --ds-* token so it already resolves
   correctly under paper/blue/navy/dark.

   Design: docs/superpowers/specs/2026-08-29-empty-blocked-forbidden-vocabulary-design.md

   Three TONES, not four states, because `blocked` is only ever the
   disclosed exception (see the spec) — an undisclosed access denial uses
   `nothing_found`'s neutral tone so it stays indistinguishable from
   absence. `failed` is the one tone that must never read as either
   neutral state, which is the whole point of this component existing. */
.state-panel {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 28px 22px; margin: 8px 0;
  border-radius: var(--ds-radius-md, 10px);
  border: 1px dashed var(--ds-border);
  background: var(--ds-surface);
  text-align: left;
}
.state-panel__icon {
  flex-shrink: 0; width: 22px; height: 22px;
  color: var(--ds-text-muted);
}
.state-panel__icon svg { width: 100%; height: 100%; }
.state-panel__title {
  margin: 0; font-size: 14.5px; font-weight: 600;
  color: var(--ds-text-primary);
}
.state-panel__text {
  margin: 4px 0 0; font-size: 13px; color: var(--ds-text-secondary);
}
.state-panel__cta { margin-top: 12px; }

/* Neutral (nothing_found / empty / undisclosed blocked) — no color beyond
   the muted icon. A run that found nothing is still a full, calm card,
   never a bare dash. */
.state-panel--neutral { border-color: var(--ds-border); }

/* Warn (blocked, disclosed case only) — an access FACT, not an error, so
   it takes the same amber the "admin mode paused" card in error.html
   uses, never the danger tone below. */
.state-panel--warn {
  border-style: solid; border-color: var(--ds-accent-warn-line);
  background: var(--ds-accent-warn-bg);
}
.state-panel--warn .state-panel__icon,
.state-panel--warn .state-panel__title { color: var(--ds-accent-warn-ink); }

/* Danger (failed) — the one tone that must never be confused with the
   other two. A retry action belongs here when the caller can retry. */
.state-panel--danger {
  border-style: solid; border-color: var(--ds-accent-danger-line);
  background: var(--ds-accent-danger-bg);
}
.state-panel--danger .state-panel__icon,
.state-panel--danger .state-panel__title { color: var(--ds-accent-danger-ink); }

/* Compact — a single tinted line for a tight space (e.g. the rail's
   conversation list, ~230px wide), where a full bordered card would
   overwhelm the surface it sits in. Tone still carries entirely through
   icon + text color, which is what keeps a compact `failed` row from
   reading as just another muted list line. */
.state-panel--compact {
  padding: 6px 9px; margin: 4px 0 0; border: none; background: transparent;
  align-items: center; gap: 6px;
}
.state-panel--compact .state-panel__icon { width: 14px; height: 14px; }
.state-panel--compact .state-panel__title {
  font-size: 12.5px; font-weight: 500;
}
.state-panel--compact .state-panel__text { display: none; }
.state-panel--compact.state-panel--neutral .state-panel__title,
.state-panel--compact.state-panel--neutral .state-panel__icon {
  color: var(--ds-text-muted);
}
.state-panel--compact .state-panel__cta {
  margin: 0 0 0 auto; padding: 0; border: none; background: none;
  font-size: 12.5px; font-weight: 600; color: inherit;
  text-decoration: underline; cursor: pointer;
}