/* =============================================================================
   rhq_states.css — ResponderHQ empty / loading / error state components (P1.4)
   -----------------------------------------------------------------------------
   Reusable IN-PAGE state primitives (distinct from the full-page branded error
   templates in P1.3). Three sizes — block (full-page), compact (table empty),
   inline (loading) — plus dismissible banners (error/warning/info/ok).

   Phase 1 / PR P1.4 — ADDITIVE ONLY.
     * Every selector here is namespaced under `.rhq-state*`, `.rhq-banner*`,
       `.rhq-skeleton`, `.rhq-spinner`. None of those tokens exist anywhere in the
       app today (the only near-match, `.rhq-state-plan-pin-*`, is a DIFFERENT class
       token and is NOT matched by `.rhq-state`), so loading this sheet changes ZERO
       rendered pixels on existing pages.
     * Keyframes are namespaced (`rhq-state-spin`, `rhq-state-shimmer`) to avoid the
       pre-existing `@keyframes skeleton` / `spinner-border` in styles.css.
     * All values reference the `--rhq-*` tokens from rhq_tokens.css (P1.1). No new
       hard-coded brand/status colours.
     * Markup that consumes these classes lives in templates/components/_state.html
       and _banner.html. No existing screen consumes them yet (migration = Phase 5).

   Reduced-motion: spinner + skeleton shimmer respect prefers-reduced-motion.
   ============================================================================= */

/* ---- Shared state block (empty / error / info / ok) ----------------------- */
.rhq-state {
  font-family: var(--rhq-font);
  color: var(--rhq-text);
  text-align: center;
}

.rhq-state__icon {
  display: grid;
  place-items: center;
  margin: 0 auto var(--rhq-space-3);
  color: var(--rhq-status-neutral);
  background: var(--rhq-status-neutral-soft);
}
.rhq-state__icon > svg { display: block; }

/* Variant tints — icon chip only (never colour-only: copy + icon carry meaning). */
.rhq-state--empty   .rhq-state__icon { color: var(--rhq-status-info);     background: var(--rhq-status-info-soft); }
.rhq-state--info    .rhq-state__icon { color: var(--rhq-status-info);     background: var(--rhq-status-info-soft); }
.rhq-state--error   .rhq-state__icon { color: var(--rhq-status-critical); background: var(--rhq-status-critical-soft); }
.rhq-state--ok      .rhq-state__icon { color: var(--rhq-status-ok);       background: var(--rhq-status-ok-soft); }
.rhq-state--loading .rhq-state__icon { color: var(--rhq-status-info);     background: var(--rhq-status-info-soft); }

.rhq-state__heading {
  margin: 0 0 var(--rhq-space-2);
  color: var(--rhq-text-strong);
  font-weight: var(--rhq-font-weight-heading);
  letter-spacing: -0.01em;
}
.rhq-state__body {
  margin: 0 auto var(--rhq-space-4);
  color: var(--rhq-text-muted);
  max-width: 22rem;
}
.rhq-state__actions {
  display: flex;
  gap: var(--rhq-space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.rhq-state__actions:empty { display: none; }

/* Action — link or button styled identically; tokens mirror the error-page button. */
.rhq-state__cta {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: var(--rhq-radius);
  padding: 0.625rem 1.05rem;
  font: inherit;
  font-weight: 600;
  font-size: var(--rhq-text-size-sm);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--rhq-space-2);
  background: var(--rhq-color-primary);
  color: var(--rhq-text-on-brand);
  text-decoration: none;
}
.rhq-state__cta:hover { background: var(--rhq-color-primary-700); color: var(--rhq-text-on-brand); text-decoration: none; }
.rhq-state__cta--secondary {
  background: var(--rhq-surface);
  color: var(--rhq-text-strong);
  border-color: var(--rhq-border);
}
.rhq-state__cta--secondary:hover { background: var(--rhq-surface); border-color: var(--rhq-text-faint); }
.rhq-state__cta:focus-visible {
  outline: 2px solid var(--rhq-focus-ring);
  outline-offset: 2px;
}

/* ---- Size: block — full-page empty/error state ---------------------------- */
.rhq-state--block {
  padding: var(--rhq-space-7) var(--rhq-space-5);
}
.rhq-state--block .rhq-state__icon {
  width: 3rem; height: 3rem;
  border-radius: var(--rhq-radius-lg);
}
.rhq-state--block .rhq-state__heading { font-size: 1.0625rem; }
.rhq-state--block .rhq-state__body    { font-size: var(--rhq-text-size-sm); }

/* ---- Size: compact — slots into a table's empty/error area ---------------- */
.rhq-state--compact {
  padding: var(--rhq-space-6) var(--rhq-space-4);
}
.rhq-state--compact .rhq-state__icon {
  width: 2.125rem; height: 2.125rem;
  border-radius: var(--rhq-radius);
}
.rhq-state--compact .rhq-state__heading { font-size: var(--rhq-text-size-sm); }
.rhq-state--compact .rhq-state__body    { font-size: 0.8125rem; margin-bottom: var(--rhq-space-3); }

/* ---- Size: inline — loading row (spinner + label) ------------------------- */
.rhq-state--inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rhq-space-3);
  padding: var(--rhq-space-5);
  color: var(--rhq-text-muted);
  font-size: var(--rhq-text-size-sm);
  font-weight: 600;
  text-align: left;
}

/* ---- Spinner -------------------------------------------------------------- */
.rhq-spinner {
  width: 1rem; height: 1rem;
  flex: none;
  border: 2px solid var(--rhq-border);
  border-top-color: var(--rhq-color-primary);
  border-radius: 50%;
  animation: rhq-state-spin 0.65s linear infinite;
}

/* ---- Skeleton placeholder ------------------------------------------------- */
.rhq-skeleton {
  height: 0.75rem;
  border-radius: var(--rhq-radius-sm);
  background: linear-gradient(90deg, var(--rhq-border-soft) 25%, var(--rhq-border) 37%, var(--rhq-border-soft) 63%);
  background-size: 400% 100%;
  animation: rhq-state-shimmer 1.3s ease-in-out infinite;
}
.rhq-skeleton + .rhq-skeleton { margin-top: var(--rhq-space-3); }

/* ---- Banner (inline alert — error / warning / info / ok) ------------------ */
.rhq-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--rhq-space-3);
  padding: 0.8125rem 0.9375rem;
  border-radius: var(--rhq-radius);
  font-family: var(--rhq-font);
  font-size: var(--rhq-text-size-sm);
  line-height: 1.45;
}
.rhq-banner__icon { flex: none; margin-top: 1px; }
.rhq-banner__icon > svg { display: block; }
.rhq-banner__body { flex: 1 1 auto; }
.rhq-banner__body b { font-weight: 700; }

.rhq-banner--error   { background: var(--rhq-status-critical-soft); color: var(--rhq-status-critical-ink); }
.rhq-banner--warning { background: var(--rhq-status-warning-soft);  color: var(--rhq-status-warning-ink); }
.rhq-banner--info    { background: var(--rhq-status-info-soft);     color: var(--rhq-status-info-ink); }
.rhq-banner--ok      { background: var(--rhq-status-ok-soft);       color: var(--rhq-status-ok-ink); }

/* Action (retry/refresh/clear) — inline, inherits the banner ink colour. */
.rhq-banner__action {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.rhq-banner__action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }

/* Dismiss (×) */
.rhq-banner__dismiss {
  appearance: none;
  background: none;
  border: none;
  padding: 2px;
  margin: -2px -2px -2px 0;
  flex: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  line-height: 0;
}
.rhq-banner__dismiss:hover { opacity: 1; }
.rhq-banner__dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; opacity: 1; }

@keyframes rhq-state-spin { to { transform: rotate(360deg); } }
@keyframes rhq-state-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Respect users who prefer reduced motion — freeze the spinner/shimmer. */
@media (prefers-reduced-motion: reduce) {
  .rhq-spinner  { animation: none; }
  .rhq-skeleton { animation: none; }
}