/* components/feedback: Badge, StatusPill, Alert, Spinner, Loading, LoadingOverlay, EmptyState (ui/core.js) and
   ProgressBar (ui/feedback.js), on the design-system tokens. Values from DS components/feedback/*.jsx; the few
   literals are the component's own (noted where they appear). Status colours are the --status-<tone> trios. */

/* ---- Badge (DS feedback/Badge.jsx) ---- */
.ae-badge {
  --ae-tone-fg: var(--status-neutral-fg); --ae-tone-bg: var(--status-neutral-bg); --ae-tone-border: var(--status-neutral-border);
  display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; vertical-align: middle;
  padding: 3px var(--s-3); /* DS Badge md */
  border: 1px solid var(--ae-tone-border); border-radius: var(--radius-pill);
  background: var(--ae-tone-bg); color: var(--ae-tone-fg);
  font: var(--type-caption); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap;
}
.ae-badge--sm { padding: 2px var(--s-2); /* DS Badge sm */ }
.ae-badge .icon { flex-shrink: 0; }
.ae-badge--spin .icon { animation: ae-spin 900ms linear infinite; /* DS Spinner ring speed */ }
.ae-badge--success { --ae-tone-fg: var(--status-success-fg); --ae-tone-bg: var(--status-success-bg); --ae-tone-border: var(--status-success-border); }
.ae-badge--warning { --ae-tone-fg: var(--status-warning-fg); --ae-tone-bg: var(--status-warning-bg); --ae-tone-border: var(--status-warning-border); }
.ae-badge--danger { --ae-tone-fg: var(--status-danger-fg); --ae-tone-bg: var(--status-danger-bg); --ae-tone-border: var(--status-danger-border); }
.ae-badge--info { --ae-tone-fg: var(--status-info-fg); --ae-tone-bg: var(--status-info-bg); --ae-tone-border: var(--status-info-border); }
.ae-badge--brand { --ae-tone-fg: var(--text-brand); --ae-tone-bg: var(--surface-selected); --ae-tone-border: var(--border-brand); }

/* ---- StatusPill (DS feedback/StatusPill.jsx): the table's status cell ---- */
.ae-status-pill {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  padding: 2px var(--s-2); border-radius: 5px; /* DS StatusPill: 2px 8px, 5px corner */
  border: 1px solid var(--status-neutral-border); background: var(--status-neutral-bg); color: var(--status-neutral-fg);
  font: inherit; font-size: 11px; font-weight: var(--weight-semibold); line-height: 1.3; white-space: nowrap;
  /* 11px/600 is below the ramp on purpose (DS: matches the table-header spec) */
}
.ae-status-pill--fixed { justify-content: flex-start; }
.ae-status-pill__dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.ae-status-pill--pulse .ae-status-pill__dot { animation: status-pill-pulse 1.4s ease infinite; /* DS StatusPill */ }
.ae-status-pill--success { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-fg); }
.ae-status-pill--warning { border-color: var(--status-warning-border); background: var(--status-warning-bg); color: var(--status-warning-fg); }
.ae-status-pill--danger { border-color: var(--status-danger-border); background: var(--status-danger-bg); color: var(--status-danger-fg); }
.ae-status-pill--info { border-color: var(--status-info-border); background: var(--status-info-bg); color: var(--status-info-fg); }

/* ---- Alert (DS feedback/Alert.jsx) ---- */
.ae-alert {
  --ae-tone-fg: var(--status-info-fg); --ae-tone-bg: var(--status-info-bg); --ae-tone-border: var(--status-info-border);
  display: flex; align-items: flex-start; gap: var(--s-2); min-width: 0;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-md);
  background: var(--ae-tone-bg); border: 1px solid var(--ae-tone-border); color: var(--text-body);
}
.ae-alert--success { --ae-tone-fg: var(--status-success-fg); --ae-tone-bg: var(--status-success-bg); --ae-tone-border: var(--status-success-border); }
.ae-alert--warning { --ae-tone-fg: var(--status-warning-fg); --ae-tone-bg: var(--status-warning-bg); --ae-tone-border: var(--status-warning-border); }
.ae-alert--danger { --ae-tone-fg: var(--status-danger-fg); --ae-tone-bg: var(--status-danger-bg); --ae-tone-border: var(--status-danger-border); }
.ae-alert__icon { display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; /* DS Alert */ color: var(--ae-tone-fg); }
.ae-alert__content { display: grid; gap: 2px; /* DS Alert */ min-width: 0; flex: 1 1 auto; }
.ae-alert__title { font: var(--type-body-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.ae-alert__body { display: flex; flex-direction: column; gap: var(--s-1); font: var(--type-caption); color: var(--text-body); text-wrap: pretty; }
.ae-alert__items { margin: 0; padding-left: var(--s-4); display: flex; flex-direction: column; gap: 2px; }
.ae-alert__items li { overflow-wrap: anywhere; }
.ae-alert__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.ae-alert--compact { padding: var(--s-2) var(--s-3); }

/* ---- Spinner (DS feedback/Spinner.jsx) ---- */
.ae-spinner { display: inline-flex; align-items: center; gap: var(--s-2); vertical-align: middle; color: currentColor; }
.ae-spinner--brand { color: var(--surface-brand); }
.ae-spinner--muted { color: var(--text-muted); }
.ae-spinner-ring {
  display: inline-block; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
  border: 3.6px solid currentColor; border-right-color: transparent; opacity: 0.9; /* DS Spinner ring */
  animation: ae-spin 900ms linear infinite;
}
.ae-spinner-dots { display: inline-flex; align-items: center; flex-shrink: 0; }
.ae-spinner-dot {
  display: block; border-radius: var(--radius-pill); background: currentColor;
  animation: ae-spinner-pulse 1080ms var(--ease-standard) infinite; /* DS Spinner PULSE_MS */
}
.ae-spinner__label { font: var(--type-caption); font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; }
.ae-spinner--inherit .ae-spinner__label { color: inherit; }

/* Loading: a centred wait for a region */
.ae-loading { display: flex; align-items: center; justify-content: center; padding: var(--s-8) var(--s-4); }

/* ---- LoadingOverlay (DS feedback/LoadingOverlay.jsx): covers its nearest positioned ancestor ---- */
.ae-loading-overlay {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
  background: color-mix(in oklab, var(--surface-card) 72%, transparent); backdrop-filter: blur(1px); /* DS LoadingOverlay */
}

/* ---- EmptyState (no DS component: quiet and token-only, no tile) ---- */
.ae-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center;
  padding: var(--s-8) var(--s-6);
}
.ae-empty--compact { padding: var(--s-6) var(--s-4); }
/* framed: the bordered frame of the list it stands in for (the FormCard hairline and corner), filling the list area */
.ae-empty--framed {
  flex: 1 1 auto; justify-content: center; min-height: 240px; background: var(--surface-card);
  border: var(--border-width-hairline) solid var(--border-default); border-radius: var(--radius-md);
}
.ae-empty__icon { display: inline-flex; color: var(--text-subtle); margin-bottom: var(--s-1); }
.ae-empty__title { font: var(--type-h4); color: var(--text-strong); }
.ae-empty--compact .ae-empty__title { font: var(--type-body); font-weight: var(--weight-semibold); }
/* the DS PlaceholderScreen's text role (--type-body-sm muted); a role of its own also keeps the body's global tabular
   figures off prose, where Inter's tabular hyphen spaces out "ae-sentinel" */
.ae-empty__text { max-width: 52ch; font: var(--type-body-sm); color: var(--text-muted); display: flex; flex-direction: column; gap: var(--s-2); }
.ae-empty__action { margin-top: var(--s-2); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }

/* ---- ProgressBar (DS feedback/ProgressBar.jsx) ---- */
.ae-progress { display: grid; gap: var(--s-1); min-width: 0; }
.ae-progress__head { display: flex; align-items: baseline; gap: var(--s-2); }
.ae-progress__label { flex: 1 1 auto; min-width: 0; font: var(--type-caption); font-size: var(--text-2xs); color: var(--text-muted); }
.ae-progress__value { margin-left: auto; font: var(--type-caption); font-size: var(--text-2xs); color: var(--text-strong); }
.ae-progress__track { height: 6px; /* DS ProgressBar */ border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.ae-progress__fill {
  height: 100%; border-radius: var(--radius-pill); background: var(--surface-brand);
  transition: width var(--duration-normal) var(--ease-standard);
}
.ae-progress--success .ae-progress__fill { background: var(--status-success-fg); }
.ae-progress--warning .ae-progress__fill { background: var(--status-warning-fg); }
.ae-progress--danger .ae-progress__fill { background: var(--status-danger-fg); }
.ae-progress--indeterminate .ae-progress__fill { width: 40%; animation: ae-progress-sweep 1.6s var(--ease-standard) infinite; /* DS */ }