/* 48-empty-state.css
   ----------------------------------------------------------------
   Centered illustrated panel used inside any page body when:
     - a list / dashboard has no data yet (empty)
     - a sub-section is gated by tier / flag (warning variant)
     - a long-running task finished (success variant)
     - an informational interstitial (info variant)

   Wireframe contract: shell_mobile/inventory_atlas.html frames
   X.1 (default/empty) and X.2 (is-warning/tier-blocked).

   Variants:
     .empty-state              default · neutral icon bubble
     .empty-state.is-warning   tier-blocked / locked feature
     .empty-state.is-success   all-clear / done
     .empty-state.is-info      pre-launch / educational
     .empty-state.fill         grow to fill parent (justify center)

   Slots:
     .empty-state-icon         round 64px bubble with sprite svg
     .empty-state-title        H2-level, sized per variant
     .empty-state-body         muted paragraph, max-width 280
     .empty-state-extra        optional strip / chip / code key
     .empty-state-actions      stacked CTAs (primary + optional ghost)

   Tokens only. No raw hex.
   ---------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-7) var(--space-4);
}

.empty-state.fill {
  flex: 1;
  justify-content: center;
}

/* --- Icon bubble -------------------------------------------------- */
.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 1px solid var(--divider);
  display: grid;
  place-items: center;
  color: var(--muted);
}

.empty-state-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.empty-state.is-warning .empty-state-icon {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}

.empty-state.is-success .empty-state-icon {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.empty-state.is-info .empty-state-icon {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info);
}

.empty-state.is-error .empty-state-icon {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error);
}

/* --- Title + body ------------------------------------------------- */
.empty-state-title {
  font-size: var(--font-size-subheading);
  font-weight: 800;
  color: var(--text);
  letter-spacing: var(--letter-spacing-prominent);
  margin: 0;
}

/* Warning variant uses page-title size because a tier denial is the
   main message on screen, not a secondary state. */
.empty-state.is-warning .empty-state-title {
  font-size: var(--font-size-page-title);
  letter-spacing: var(--letter-spacing-page-title);
}

.empty-state-body {
  font-size: var(--font-size-body);
  color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
  margin: 0;
}

/* --- Optional extra (tier strip, code key, hint) ------------------ */
.empty-state-extra {
  margin-top: var(--space-1);
}

/* --- Tier strip child (paired with .is-warning) ------------------- */
.empty-state-tier-strip {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border: 1px solid var(--divider);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.empty-state-tier-strip-now {
  color: var(--muted);
}

.empty-state-tier-strip-need {
  color: var(--primary);
  padding-left: var(--space-2);
  border-left: 1px solid var(--divider);
  margin-left: var(--space-1);
}

/* --- Actions ------------------------------------------------------ */
.empty-state-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  width: 100%;
  max-width: 280px;
}

.empty-state-actions .btn {
  width: 100%;
}

/* Desktop: two-up row for primary + secondary CTAs */
@media (min-width: 1024px) {
  .empty-state-actions {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
  .empty-state-actions .btn {
    width: auto;
    min-width: 180px;
  }
}