@layer components {
/* cards.css — Card components (HEY Calm + Fizzy Vibrant) */

.card {
  background: var(--color-canvas-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

/* ─── Top-Bordered Cards ─── */
.card--bordered-top {
  border-top: 3.5px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.card--bordered-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to bottom, oklch(0.55 0.15 var(--step-hue, 245) / 0.15), transparent);
  pointer-events: none;
}

/* Step type colored top borders (using hue tokens directly) */
.card--question  { border-top-color: oklch(0.55 0.20 var(--hue-question)); --step-hue: var(--hue-question); }
.card--action    { border-top-color: oklch(0.60 0.19 var(--hue-action));   --step-hue: var(--hue-action); }
.card--message   { border-top-color: oklch(0.55 0.18 var(--hue-message));  --step-hue: var(--hue-message); }
.card--escalate  { border-top-color: oklch(0.55 0.22 var(--hue-escalate)); --step-hue: var(--hue-escalate); }
.card--resolve   { border-top-color: oklch(0.60 0.19 var(--hue-resolve));  --step-hue: var(--hue-resolve); }
.card--sub-flow  { border-top-color: oklch(0.55 0.18 var(--hue-subflow));  --step-hue: var(--hue-subflow); }

/* ─── Card with Left Accent ─── */
.card--accent-left {
  border-left: 3px solid var(--color-border-strong);
}

/* ─── Muted Card ─── */
.card--muted {
  background: var(--color-canvas-alt);
  box-shadow: none;
  border-color: var(--color-border);
}

[data-theme="dark"] .card--muted {
  background: oklch(0.16 0.012 245);
}

/* ─── Interactive Card (liftable) ─── */
.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card--interactive:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* ─── Card Sections ─── */
.card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid oklch(0.89 0.015 245 / 0.5);
}

.card__body {
  padding: var(--space-4) var(--space-5);
}

.card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid oklch(0.89 0.015 245 / 0.5);
}

/* ============================================================================
   Alert Component
   Inline callout boxes for info, warning, success, error, danger
   ============================================================================ */

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border-strong);
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
}

.alert--info    { border-left-color: var(--color-primary); }
.alert--warning { border-left-color: var(--color-warning); }
.alert--success { border-left-color: var(--color-positive); }
.alert--error,
.alert--danger  { border-left-color: var(--color-negative); }

.alert--info {
  background: oklch(0.96 0.04 250);
  border-color: oklch(0.85 0.08 250);
  color: oklch(0.35 0.14 250);
}

.alert--warning {
  background: oklch(0.97 0.04 80);
  border-color: oklch(0.85 0.10 80);
  color: oklch(0.45 0.12 80);
}

.alert--success {
  background: oklch(0.97 0.04 145);
  border-color: oklch(0.85 0.10 145);
  color: oklch(0.40 0.16 145);
}

.alert--error,
.alert--danger {
  background: oklch(0.97 0.04 25);
  border-color: oklch(0.85 0.10 25);
  color: oklch(0.45 0.16 25);
}

[data-theme="dark"] .alert--info {
  background: oklch(0.20 0.04 250);
  border-color: oklch(0.30 0.08 250);
  color: oklch(0.75 0.12 250);
}

[data-theme="dark"] .alert--warning {
  background: oklch(0.20 0.04 80);
  border-color: oklch(0.30 0.10 80);
  color: oklch(0.80 0.10 80);
}

[data-theme="dark"] .alert--success {
  background: oklch(0.20 0.04 145);
  border-color: oklch(0.30 0.10 145);
  color: oklch(0.75 0.14 145);
}

[data-theme="dark"] .alert--error,
[data-theme="dark"] .alert--danger {
  background: oklch(0.20 0.04 25);
  border-color: oklch(0.30 0.10 25);
  color: oklch(0.75 0.14 25);
}

/* ============================================================================
   Image Lightbox
   ============================================================================ */

.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: oklch(0 0 0 / 0.85);
  padding: var(--space-8);
  cursor: pointer;
}

.image-lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px oklch(0 0 0 / 0.5);
  cursor: default;
}

.image-lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: oklch(1 0 0 / 0.15);
  border: none;
  border-radius: var(--radius-full);
  color: white;
  font-size: var(--text-xl);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.image-lightbox-close:hover {
  background-color: oklch(1 0 0 / 0.3);
}

/* ============================================================================
   Empty State
   ============================================================================ */

.empty-state {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--color-ink-muted);
}

.empty-state__icon {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--space-4);
  color: var(--color-ink-muted);
}

.empty-state__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.empty-state__message {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-6);
}

/* ============================================================================
   Drag Handle
   ============================================================================ */

.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--color-ink-muted);
  padding: var(--space-1);
  border-radius: var(--radius);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
  font-size: var(--text-lg);
  line-height: 1;
}

.drag-handle:hover {
  color: var(--color-ink);
  background: var(--color-canvas-alt);
}

.drag-handle:active {
  cursor: grabbing;
}

/* ============================================================================
   Step Outline Sidebar
   ============================================================================ */

.step-outline-sidebar {
  position: sticky;
  top: var(--space-4);
  flex-shrink: 0;
}

.step-outline-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-subtle);
  cursor: pointer;
  border-radius: var(--radius);
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  text-decoration: none;
  overflow: hidden;
  min-width: 0;
}

.step-outline-item:hover {
  background: var(--color-canvas-alt);
  color: var(--color-ink);
}

.step-outline-item.is-highlighted {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

[data-theme="dark"] .step-outline-item.is-highlighted {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* Step outline number — colored circle using --step-hue */
.step-outline__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  background: oklch(0.55 0.16 var(--step-hue));
  color: oklch(1 0 0);
}

[data-theme="dark"] .step-outline__number {
  background: oklch(0.45 0.14 var(--step-hue));
  color: oklch(1 0 0);
}

/* Step outline type icon — colored character next to title */
.step-outline__type-icon {
  color: oklch(0.50 0.16 var(--step-hue));
  font-weight: 700;
}

[data-theme="dark"] .step-outline__type-icon {
  color: oklch(0.65 0.14 var(--step-hue));
}
}