/* ============================================================================
   Feedback: flash, alerts & empty states
   ----------------------------------------------------------------------------
   .flash-notice / .flash-alert are the existing flash class names; they're
   restyled here as proper callouts. .alert is the general-purpose variant for
   inline callouts in views.
   ============================================================================ */

@layer components {
  .alert,
  .flash-notice,
  .flash-alert {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 0.5px solid transparent;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: var(--space-4);
  }

  /* Flash messages arrive with the page; the same quiet disclose the
     disclosure widgets use ties the "something just happened" moments to one
     motion vocabulary. (Keyframes in base.css; reduced motion collapses it.) */
  .flash-notice,
  .flash-alert { animation: disclose var(--speed) var(--ease-out); }

  /* Semantic palettes */
  .alert.info { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }
  .alert.success,
  .flash-notice { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
  .alert.warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
  .alert.danger,
  .flash-alert { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }

  .alert-title { font-weight: 500; margin: 0 0 2px; }
  .alert-desc { margin: 0; opacity: 0.92; }

  /* Validation summaries use the same icon treatment as other errors, retain a
     real list, announce themselves, and accept focus after a failed submit. */
  .validation-errors > div { min-width: 0; }
  .validation-errors ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); list-style: disc; }
  .validation-errors li { margin: 0; }
  .validation-errors:focus { outline: none; box-shadow: var(--ring); border-radius: var(--radius-md); }

  .job-failure { max-width: 72ch; }
  .job-failure-content { min-width: 0; }
  .job-failure-detail { overflow-wrap: anywhere; }
  .job-failure-action { margin-top: var(--space-3); }
  .job-failure-action form { margin: 0; }

  /* Empty / zero states. */
  .empty,
  .empty-state {
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 0.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    font-size: 13.5px;
    /* Empty states stand in for a card, so keep the same clearance from
       whatever follows. */
    margin-bottom: var(--space-5);
  }
  .empty-state-icon { color: var(--text-tertiary); margin-bottom: var(--space-2); }
  /* Spot illustrations (shared/illustrations/*) replace the icon on the few
     full-size zero states that greet a first-time flow. Line work inherits
     the quiet tertiary color; accent fills come from tokens inside the SVG. */
  .empty-state-illustration { display: block; margin: 0 auto var(--space-2); color: var(--text-tertiary); }
  .empty-state-heading { margin: 0; color: var(--text-primary); font-weight: 500; }
  .empty-state-description { max-width: 58ch; margin: var(--space-1) auto var(--space-3); }
  .empty-state > :last-child { margin-bottom: 0; }
  .empty-state-compact { padding: var(--space-3) var(--space-4); text-align: left; }
  .empty-state-compact .empty-state-description { margin-left: 0; margin-right: 0; }

  /* Full-page error states (ErrorsController): the same quiet, centered
     language as a full-size empty state, but the page itself is the surface —
     no card chrome around a whole-screen failure. */
  .error-page { max-width: 480px; margin: var(--space-10) auto; text-align: center; }
  .error-page h1 { font-size: 18px; margin: 0 0 var(--space-2); }
  .error-page p { color: var(--text-secondary); margin: 0 0 var(--space-5); }
  .error-page .empty-state-illustration { margin-bottom: var(--space-3); }
  .error-page-actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
}