/*
  design-system.css — Phase 1 UI/UX overhaul
  ════════════════════════════════════════════════════════════════════════
  Loaded AFTER cloud.css in dashboard.html so its rules can layer on top
  of the existing styles without rewriting them. Provides:

    1. Squircle utility classes (superellipse corners)
    2. Pressable interaction utilities (spring press + hover lift)
    3. Focus-visible rings (keyboard-only, not on mouse click)
    4. Skeleton loaders (shimmer, reduced-motion friendly)
    5. Empty state component (icon + title + desc + action)
    6. Mesh gradient ambient background (hero/auth gate only)
    7. Modal polish (spring scale-in + mobile bottom-sheet)
    8. Toast polish (glass material + spring drop)

  All values reference tokens from tokens.css / clid-theme.css — no new
  colors are introduced.
  ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   1. SQUIRCLE UTILITIES
   Use clip-path for true superellipse feel where supported, fall back to
   border-radius otherwise. Larger elements get larger radii.
   ════════════════════════════════════════════════════════════════════════ */
.squircle-card,
.squircle-modal,
.squircle-pill,
.squircle-icon {
  border-radius: var(--radius-card);
}
.squircle-modal { border-radius: var(--radius-modal); }
.squircle-pill  { border-radius: var(--radius-pill); }
.squircle-icon  { border-radius: var(--radius-sm); }

@supports (clip-path: inset(0 round 0)) {
  .squircle-card {
    clip-path: inset(0 round var(--radius-card));
  }
  .squircle-modal {
    clip-path: inset(0 round var(--radius-modal));
  }
  .squircle-pill {
    clip-path: inset(0 round var(--radius-pill));
  }
  .squircle-icon {
    clip-path: inset(0 round var(--radius-sm));
  }
}

/* ════════════════════════════════════════════════════════════════════════
   2. PRESSABLE INTERACTION UTILITIES
   Apply .pressable to any tappable element. Spring press feedback +
   hover lift for cards. Respects prefers-reduced-motion (handled by the
   global rule in animations.css).
   ════════════════════════════════════════════════════════════════════════ */
.pressable {
  transition: transform var(--dur-micro) var(--spring-press),
              background var(--dur-micro) var(--spring-press),
              border-color var(--dur-micro) var(--spring-press),
              box-shadow var(--dur-micro) var(--spring-press);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.pressable:active {
  transform: scale(var(--press-scale-strong));
}
.pressable-soft:active {
  transform: scale(var(--press-scale-soft));
}

/* Card-style pressable: lifts on hover, soft press on tap */
.pressable-card {
  transition: transform var(--dur-micro) var(--spring-press),
              box-shadow var(--dur-micro) var(--spring-press),
              border-color var(--dur-micro) var(--spring-press),
              background var(--dur-micro) var(--spring-press);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.pressable-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.pressable-card:active {
  transform: scale(var(--press-scale-soft));
}

/* ════════════════════════════════════════════════════════════════════════
   3. FOCUS-VISIBLE RINGS (keyboard-only)
   Applied to every interactive element. `:focus-visible` is the modern
   selector that only matches keyboard focus, not mouse click. We use
   `:not(:active)` so the focus ring doesn't appear during a press.
   ════════════════════════════════════════════════════════════════════════ */
a:focus-visible:not(:active),
button:focus-visible:not(:active),
input:focus-visible:not(:active),
textarea:focus-visible:not(:active),
select:focus-visible:not(:active),
[tabindex]:focus-visible:not(:active),
.cloud-btn:focus-visible:not(:active),
.cloud-action-btn:focus-visible:not(:active),
.cloud-mini-btn:focus-visible:not(:active),
.cloud-icon-btn:focus-visible:not(:active),
.cloud-pillnav-item:focus-visible:not(:active),
.cloud-nav-item:focus-visible:not(:active),
.cloud-settings-nav-item:focus-visible:not(:active),
.cloud-user-menu-item:focus-visible:not(:active),
.cloud-acctswitch-menu-item:focus-visible:not(:active),
.cloud-user-pill:focus-visible:not(:active),
.cloud-acctswitch-btn:focus-visible:not(:active),
.cloud-menu-drawer-close:focus-visible:not(:active),
.cloud-modal-close:focus-visible:not(:active),
.cloud-wizard-close:focus-visible:not(:active),
.cloud-project-card:focus-visible:not(:active),
.cloud-modules-edit-card:focus-visible:not(:active),
.cloud-wizard-module-card:focus-visible:not(:active),
.cmd-item:focus-visible:not(:active) {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: inherit;
  z-index: 1;
}

/* Inputs already have their own focus style (border-color + box-shadow).
   We don't want to clobber it — just ensure something visible shows. */
.cloud-field input:focus-visible,
.cloud-field select:focus-visible,
.cloud-field textarea:focus-visible,
.cloud-settings-field input:focus-visible,
.cloud-settings-field textarea:focus-visible,
.cloud-wizard-field input:focus-visible,
.cloud-wizard-field textarea:focus-visible {
  outline: none;
}

/* ════════════════════════════════════════════════════════════════════════
   4. SKELETON LOADERS
   Shimmer animation, neutral fill, respects prefers-reduced-motion. Use
   instead of "Loading…" text wherever the content shape is predictable
   (lists, tables, card grids).
   ════════════════════════════════════════════════════════════════════════ */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--fill-quaternary) 0%,
    var(--fill-tertiary) 50%,
    var(--fill-quaternary) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-xs);
}

.skeleton-line    { height: 14px; width: 100%; border-radius: var(--radius-xs); }
.skeleton-line-sm { height: 10px; width: 100%; border-radius: var(--radius-xs); }
.skeleton-block   { height: 80px; width: 100%; border-radius: var(--radius-card); }
.skeleton-circle  { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }

/* Multi-line skeleton stack — drop a few .skeleton-line elements inside */
.skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

/* Card-grid skeleton (for project list, module grid, etc.) */
.skeleton-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

/* Reduced-motion: static neutral block, no shimmer */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--fill-quaternary);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   5. EMPTY STATE COMPONENT
   Centered, max-width 420px, padding 48px 24px. Icon + title + desc +
   optional next action. Use .cloud-empty-state — note this OVERRIDES the
   existing minimal version in cloud.css with a more polished spec.
   ════════════════════════════════════════════════════════════════════════ */
.cloud-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  padding: var(--space-11) var(--space-6);
  background: transparent;
  border: none;
  border-radius: var(--radius-card);
}
.cloud-empty-state-icon {
  width: 56px;
  height: 56px;
  margin: 0 0 var(--space-5);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-size-lg);
  color: var(--accent);
  flex-shrink: 0;
}
.cloud-empty-state-title,
.cloud-empty-state h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--label-primary);
}
.cloud-empty-state-desc,
.cloud-empty-state p {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--label-secondary);
  max-width: 360px;
}
.cloud-empty-state-action,
.cloud-empty-state .cloud-btn-primary,
.cloud-empty-state .cloud-action-btn {
  margin-top: var(--space-6);
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
}
.cloud-empty-state-hint {
  margin-top: var(--space-3);
  font-size: var(--font-size-caption);
  color: var(--label-tertiary);
}

/* ════════════════════════════════════════════════════════════════════════
   6. MESH GRADIENT AMBIENT BACKGROUND
   For hero/auth gate only — NOT every page. Slow-moving radial gradients
   (60s+ loop). Reduced-motion: static gradient.
   ════════════════════════════════════════════════════════════════════════ */
@keyframes mesh-drift {
  0%   { background-position:   0% 50%, 100% 50%,  50%   0%; }
  50%  { background-position: 100% 50%,   0% 50%,  50% 100%; }
  100% { background-position:   0% 50%, 100% 50%,  50%   0%; }
}

.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 30%, color-mix(in srgb, var(--system-indigo) 14%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, color-mix(in srgb, var(--system-blue) 10%, transparent) 0%, transparent 70%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: mesh-drift 60s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mesh-bg {
    animation: none;
    background-size: 100% 100%, 100% 100%, 100% 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   7. MODAL POLISH
   Backdrop blur + dark scrim (not just rgba(0,0,0,0.5)). Modal springs
   in from center using scale-in keyframe. On mobile (≤640px) becomes a
   bottom sheet (rounded top, slides up).
   ════════════════════════════════════════════════════════════════════════ */
.cloud-wizard-overlay,
.cloud-modal-overlay,
.cloud-modal-backdrop {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(0, 0, 0, 0.55);
  animation: backdrop-fade var(--duration-base) var(--ease-out-quick) both;
}

.cloud-wizard-modal,
.cloud-modal {
  animation: scale-in var(--dur-std) var(--spring-enter) both;
  box-shadow: var(--shadow-3);
  border-radius: var(--radius-modal);
}

/* Mobile bottom-sheet behaviour for modals */
@media (max-width: 640px) {
  .cloud-wizard-overlay,
  .cloud-modal-overlay,
  .cloud-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .cloud-wizard-modal,
  .cloud-modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
    margin: 0;
    animation: sheet-rise var(--dur-std) var(--spring-enter) both;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   8. TOAST POLISH
   Use glass-regular material (blur 20px). Spring entrance via the
   existing anim-toast-drop class. Optional thin progress bar shows
   auto-dismiss countdown.
   ════════════════════════════════════════════════════════════════════════ */
.cloud-toast {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(var(--glass-tint), 0.62);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-3);
  animation: toast-drop var(--dur-std) var(--spring-enter) both;
}

/* Auto-dismissal progress indicator (optional — JS can add .cloud-toast-progress
   inside .cloud-toast to render a thin bar that drains over the toast lifetime). */
.cloud-toast-progress {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 4px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--fill-quaternary);
  overflow: hidden;
}
.cloud-toast-progress::after {
  content: '';
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  animation: cloud-toast-drain 4s linear forwards;
}
@keyframes cloud-toast-drain {
  from { width: 100%; }
  to   { width: 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-toast { animation: none; }
  .cloud-toast-progress::after { animation: none; width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   9. ERROR STATE CARD
   Replaces inline `<div style="color:#FF453A">${err.message}</div>` patterns
   with a designed error card: icon + message + retry button.
   ════════════════════════════════════════════════════════════════════════ */
.cloud-error-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--system-red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--system-red) 30%, transparent);
  border-radius: var(--radius-card);
  color: var(--label-primary);
}
.cloud-error-card-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--system-red) 18%, transparent);
  color: var(--system-red);
  font-size: var(--icon-size-md);
}
.cloud-error-card-body { flex: 1; min-width: 0; }
.cloud-error-card-title {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--label-primary);
  margin: 0 0 var(--space-1);
}
.cloud-error-card-msg {
  font-size: var(--font-size-caption);
  color: var(--label-secondary);
  line-height: var(--line-height-normal);
  margin: 0;
  word-break: break-word;
}
.cloud-error-card-action {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--system-red) 14%, transparent);
  color: var(--system-red);
  border: 1px solid color-mix(in srgb, var(--system-red) 30%, transparent);
  font-size: var(--font-size-caption);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform var(--dur-micro) var(--spring-press),
              background var(--dur-micro) var(--spring-press);
}
.cloud-error-card-action:active {
  transform: scale(var(--press-scale-strong));
}
/* Compact variant: tighter padding for dropdowns / inline lists / small panels. */
.cloud-error-card.cloud-error-card--compact {
  padding: var(--space-3) var(--space-4);
}
.cloud-error-card.cloud-error-card--compact .cloud-error-card-icon {
  width: 24px;
  height: 24px;
  font-size: var(--icon-size-sm);
}
.cloud-error-card.cloud-error-card--compact .cloud-error-card-title {
  font-size: var(--font-size-caption);
  margin-bottom: 0;
}
.cloud-error-card.cloud-error-card--compact .cloud-error-card-msg {
  font-size: 11px;
}
/* Stacked variant: card body stacks below icon row (used when an extended
   detail block like a JSON dump or stack trace follows the error message). */
.cloud-error-card.cloud-error-card--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.cloud-error-card-detail {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--system-red) 6%, transparent);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  line-height: var(--line-height-normal);
  color: var(--label-secondary);
  overflow-x: auto;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════════════════════
   10. TAP-TARGET ENFORCEMENT (44×44 minimum)
   Applied to interactive elements that may be smaller than the Apple HIG
   minimum. Doesn't change the visual size — just ensures the touchable
   hit area meets 44×44 via min-height/min-width.
   ════════════════════════════════════════════════════════════════════════ */
.cloud-icon-btn,
.cloud-menu-drawer-close,
.cloud-modal-close,
.cloud-wizard-close,
.cloud-pillnav-item,
.cloud-nav-item,
.cloud-settings-nav-item,
.cloud-mini-btn {
  min-height: 44px;
  min-width: 44px;
}

/* Subtle overrides: keep visual padding tight but hit-area full. The
   element's box already meets 44×44 via min-height/min-width above; if
   the visible button is smaller (e.g. icon-only), we use ::before to
   extend the hit area without changing the visual. */
.cloud-mini-btn {
  /* Mini buttons are visually tiny but should still hit 44px target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════
   11. WARNING STATE CARD  (Phase 5)
   Same structural spec as .cloud-error-card but using --system-orange for
   non-fatal warnings (resource not found, soft quota warning, pending
   approval, destructive-action confirmation banner). Variants mirror the
   error card: default / --compact / --stacked / .cloud-warning-card-detail.
   ════════════════════════════════════════════════════════════════════════ */
.cloud-warning-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--system-orange) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--system-orange) 30%, transparent);
  border-radius: var(--radius-card);
  color: var(--label-primary);
}
.cloud-warning-card-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--system-orange) 18%, transparent);
  color: var(--system-orange);
  font-size: var(--icon-size-md);
}
.cloud-warning-card-body { flex: 1; min-width: 0; }
.cloud-warning-card-title {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--label-primary);
  margin: 0 0 var(--space-1);
}
.cloud-warning-card-msg {
  font-size: var(--font-size-caption);
  color: var(--label-secondary);
  line-height: var(--line-height-normal);
  margin: 0;
  word-break: break-word;
}
.cloud-warning-card-msg a,
.cloud-warning-card-msg code {
  color: var(--system-orange);
}
.cloud-warning-card-msg code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  background: color-mix(in srgb, var(--system-orange) 10%, transparent);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}
.cloud-warning-card-action {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--system-orange) 14%, transparent);
  color: var(--system-orange);
  border: 1px solid color-mix(in srgb, var(--system-orange) 30%, transparent);
  font-size: var(--font-size-caption);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: transform var(--dur-micro) var(--spring-press),
              background var(--dur-micro) var(--spring-press);
}
.cloud-warning-card-action:active {
  transform: scale(var(--press-scale-strong));
}
/* Compact variant — tighter padding for inline panels / dropdowns. */
.cloud-warning-card.cloud-warning-card--compact {
  padding: var(--space-3) var(--space-4);
}
.cloud-warning-card.cloud-warning-card--compact .cloud-warning-card-icon {
  width: 24px;
  height: 24px;
  font-size: var(--icon-size-sm);
}
.cloud-warning-card.cloud-warning-card--compact .cloud-warning-card-title {
  font-size: var(--font-size-caption);
  margin-bottom: 0;
}
.cloud-warning-card.cloud-warning-card--compact .cloud-warning-card-msg {
  font-size: 11px;
}
/* Stacked variant — body stacks below icon row (used when an extended
   detail block follows the warning message). */
.cloud-warning-card.cloud-warning-card--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.cloud-warning-card-detail {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--system-orange) 6%, transparent);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  line-height: var(--line-height-normal);
  color: var(--label-secondary);
  overflow-x: auto;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════════════════════
   12. MODAL SIZE VARIANTS + HEADER/FOOTER POLISH  (Phase 5)
   The base .cloud-modal rule sets max-width: 560px. Phase 5 adds explicit
   size variants (sm/md/lg/xl) opt-in via class, plus reinforces the
   header/footer separation with a brand-tinted top border on the footer
   and a 44×44 close button.
   ════════════════════════════════════════════════════════════════════════ */
.cloud-modal.cloud-modal--sm { max-width: 420px; }
.cloud-modal.cloud-modal--md { max-width: 560px; }   /* default, explicit */
.cloud-modal.cloud-modal--lg { max-width: 760px; }
.cloud-modal.cloud-modal--xl { max-width: 960px; }

/* Header: bottom border + brand-tinted accent strip on top of the modal */
.cloud-modal-header,
.cloud-modal .cloud-modal-header {
  position: relative;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--fill-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.cloud-modal-header h3 {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--label-primary);
}

/* Close button: 44×44 tap target, glass hover, press feedback */
.cloud-modal-close,
.cloud-modal .cloud-modal-close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--label-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--spring-press),
              background var(--dur-micro) var(--spring-press),
              color var(--dur-micro) var(--spring-press),
              border-color var(--dur-micro) var(--spring-press);
}
.cloud-modal-close:hover {
  color: var(--label-primary);
  background: var(--fill-tertiary);
  border-color: var(--glass-border);
}
.cloud-modal-close:active {
  transform: scale(var(--press-scale-strong));
}

/* Footer: top border + right-aligned actions */
.cloud-modal-footer,
.cloud-modal .cloud-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--fill-tertiary);
  background: rgba(0, 0, 0, 0.18);
}
.cloud-modal-body,
.cloud-modal .cloud-modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   13. TOAST POLISH EXTENSIONS  (Phase 5)
   Section 8 defined the .cloud-toast glass material + spring entrance.
   Phase 5 adds:
     • A stack container .cloud-toast-stack (top-right, column-reverse so
       newest appears at the top with the spring entrance)
     • A .cloud-toast-icon disc tinted per type (success/error/warning/info)
     • A .cloud-toast-close button (44×44 tap target)
     • A .cloud-toast-progress bar that drains over the toast lifetime
   The toast() function in cloud-standalone.js is patched to emit this
   richer markup and append to the stack container.
   ════════════════════════════════════════════════════════════════════════ */
.cloud-toast-stack {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  pointer-events: none;
  max-width: min(380px, 92vw);
}
.cloud-toast-stack > .cloud-toast { pointer-events: auto; }
@media (max-width: 600px) {
  .cloud-toast-stack {
    top: auto;
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }
}

/* Override the legacy bottom-center positioning when inside a stack */
.cloud-toast-stack > .cloud-toast {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  width: 100%;
}

.cloud-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  /* Legacy position kept for back-compat — when NOT inside a stack, the
     toast still renders bottom-center via the original rule. */
  overflow: hidden;
}

/* Type-tinted left border + icon disc */
.cloud-toast.success {
  border-color: color-mix(in srgb, var(--accent-bright) 45%, transparent) !important;
  border-left: 3px solid var(--accent-bright) !important;
}
.cloud-toast.error {
  border-color: color-mix(in srgb, var(--system-red) 45%, transparent) !important;
  border-left: 3px solid var(--system-red) !important;
}
.cloud-toast.warning {
  border-color: color-mix(in srgb, var(--system-orange) 45%, transparent) !important;
  border-left: 3px solid var(--system-orange) !important;
}
.cloud-toast.info {
  border-color: color-mix(in srgb, var(--system-blue) 45%, transparent) !important;
  border-left: 3px solid var(--system-blue) !important;
}

.cloud-toast-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  background: var(--fill-tertiary);
  color: var(--label-secondary);
}
.cloud-toast.success .cloud-toast-icon {
  background: color-mix(in srgb, var(--accent-bright) 18%, transparent);
  color: var(--accent-bright);
}
.cloud-toast.error .cloud-toast-icon {
  background: color-mix(in srgb, var(--system-red) 18%, transparent);
  color: var(--system-red);
}
.cloud-toast.warning .cloud-toast-icon {
  background: color-mix(in srgb, var(--system-orange) 18%, transparent);
  color: var(--system-orange);
}
.cloud-toast.info .cloud-toast-icon {
  background: color-mix(in srgb, var(--system-blue) 18%, transparent);
  color: var(--system-blue);
}

.cloud-toast-body {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-caption);
  font-weight: 500;
  color: var(--label-primary);
  line-height: var(--line-height-normal);
  padding-top: var(--space-1);
  word-break: break-word;
}

.cloud-toast-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--label-tertiary);
  font-size: 12px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--spring-press),
              background var(--dur-micro) var(--spring-press);
}
.cloud-toast-close:hover {
  color: var(--label-primary);
  background: var(--fill-tertiary);
}
.cloud-toast-close:active { transform: scale(var(--press-scale-strong)); }

/* Phase 5 progress bar overrides — sit flush at the bottom of the toast */
.cloud-toast .cloud-toast-progress {
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0;
}
.cloud-toast.success .cloud-toast-progress::after { background: var(--accent-bright); }
.cloud-toast.error   .cloud-toast-progress::after { background: var(--system-red); }
.cloud-toast.warning .cloud-toast-progress::after { background: var(--system-orange); }
.cloud-toast.info    .cloud-toast-progress::after { background: var(--system-blue); }

/* Legacy cloudSlideUp keyframe conflict: the original rule uses
   transform: translate(-50%, ...) which we override when in a stack. */
@keyframes cloud-toast-drop-stack {
  from { transform: translateY(-12px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.cloud-toast-stack > .cloud-toast {
  animation: cloud-toast-drop-stack var(--dur-std) var(--spring-enter) both;
}

@media (prefers-reduced-motion: reduce) {
  .cloud-toast-stack > .cloud-toast { animation: none; }
}