/* ─────────────────────────────────────────────────────────────
   Starboard · Feedback v2 CSS
   Snack (managed toast + Toaster), Empty, ProgressV2, Skeleton
   presets. New class names (.ad-snack, .ad-empty, .ad-progress,
   .ad-skel) — never collides with components.css.
   Depends on the shared motion tokens + keyframe library in
   colors_and_type.css. Circular indeterminate rotation reuses
   the existing ad-spin keyframe from components.css.
   ───────────────────────────────────────────────────────────── */
@import url('../../colors_and_type.css');

/* ═══ Toaster region ════════════════════════════════════════
   Fixed host. Toasts are absolutely positioned inside it and
   choreographed by transform only — collapsed stack (newest on
   top, older peek 8px and scale down) expands into a gapped
   list while the pointer is over the region. */
.ad-snack-region {
  position: fixed;
  z-index: 60;
  width: 360px;
  max-width: calc(100vw - var(--space-lg));
  pointer-events: none;
}
.ad-snack-region--bottom-right { right: var(--space-sm); bottom: var(--space-sm); }
.ad-snack-region--bottom-left  { left:  var(--space-sm); bottom: var(--space-sm); }
.ad-snack-region--top-right    { right: var(--space-sm); top: var(--space-sm); }
.ad-snack-region--top-left     { left:  var(--space-sm); top: var(--space-sm); }

/* ═══ Snack (one managed toast) ═════════════════════════════ */
.ad-snack {
  position: absolute;
  left: 0; right: 0;
  pointer-events: auto;
  /* Stack choreography — every collapse/expand re-shuffle rides
     the same curve so the motion feels like one object. */
  transition:
    transform var(--duration-5) var(--ease-out),
    opacity   var(--duration-5) var(--ease-out);
  will-change: transform;
}
.ad-snack-region--bottom-right .ad-snack,
.ad-snack-region--bottom-left  .ad-snack { bottom: 0; }
.ad-snack-region--top-right .ad-snack,
.ad-snack-region--top-left  .ad-snack { top: 0; }

/* Enter — right column slides in from the right; left column
   from the left. Fade rides along. */
.ad-snack.is-entering { animation: ad-slide-in-right var(--motion-overlay-enter), ad-fade-in var(--motion-overlay-enter); }
.ad-snack-region--bottom-left .ad-snack.is-entering,
.ad-snack-region--top-left   .ad-snack.is-entering { animation: ad-slide-in-left var(--motion-overlay-enter), ad-fade-in var(--motion-overlay-enter); }

/* Exit — faster than enter: fade + 8px rise. */
.ad-snack.is-exiting {
  opacity: 0;
  transition:
    transform var(--motion-overlay-exit),
    opacity   var(--motion-overlay-exit);
  pointer-events: none;
}

/* While the pointer drags, the card follows it 1:1 — no easing. */
.ad-snack.is-dragging { transition: opacity var(--duration-5) var(--ease-out); cursor: grabbing; }

/* ── Card surface ── */
.ad-snack__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  overflow: hidden;
  touch-action: pan-y; /* horizontal swipe belongs to the toast */
}

/* ── Icon badge — tinted circle per variant ── */
.ad-snack__badge {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  margin-top: 1px;
  transition: background var(--motion-status-change), color var(--motion-status-change);
}
.ad-snack--success .ad-snack__badge { background: var(--success-100); color: var(--success-700); }
.ad-snack--error   .ad-snack__badge { background: var(--error-100);   color: var(--error-700); }
.ad-snack--warning .ad-snack__badge { background: var(--warning-100); color: var(--warning-700); }
.ad-snack--info    .ad-snack__badge { background: var(--primary-50);  color: var(--primary-700); }
.ad-snack--loading .ad-snack__badge { background: var(--neutral-100); color: var(--fg-muted); }

/* Promise morph — when loading resolves, badge + text cross-fade
   in place over the status-change beat. */
.ad-snack__swap { animation: ad-fade-in var(--motion-status-change); }

/* ── Body ── */
.ad-snack__body { flex: 1; min-width: 0; }
.ad-snack__title {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600; font-size: 13px;
  color: var(--fg-strong);
  margin-bottom: 2px;
}
.ad-snack__text { color: var(--fg-muted); line-height: 1.5; }

/* ── Action cluster ── */
.ad-snack__actions { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.ad-snack__action {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600; font-size: 12px;
  color: var(--primary-700);
  background: var(--primary-50);
  border: 0; border-radius: var(--radius-xs);
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--duration-4) var(--ease-out);
}
.ad-snack__action:hover { background: var(--primary-100); }
.ad-snack__action:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-snack__action--ghost { background: transparent; color: var(--fg-muted); }
.ad-snack__action--ghost:hover { background: var(--neutral-100); color: var(--fg-strong); }

/* ── Close (secondary dismiss) ── */
.ad-snack__close {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: var(--radius-xs);
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--neutral-400);
  cursor: pointer;
  transition: color var(--duration-4) var(--ease-out);
}
.ad-snack__close:hover { color: var(--fg-strong); }
.ad-snack__close:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

/* ── Timer bar — variant-colored remaining-time fill. Width is
   driven by JS in 100ms steps; the linear transition smooths it.
   Hovering the region pauses the countdown (JS). ── */
.ad-snack__timer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--neutral-100);
}
.ad-snack__timer-fill {
  height: 100%;
  transition: width 100ms linear;
}
.ad-snack--success .ad-snack__timer-fill { background: var(--success-500); }
.ad-snack--error   .ad-snack__timer-fill { background: var(--error-500); }
.ad-snack--warning .ad-snack__timer-fill { background: var(--warning-500); }
.ad-snack--info    .ad-snack__timer-fill { background: var(--primary-500); }

/* ═══ Empty state ═══════════════════════════════════════════ */
.ad-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  animation: ad-fade-up 180ms var(--ease-out);
}
.ad-empty__ring {
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  color: var(--neutral-500);
  display: grid; place-items: center;
  margin-bottom: var(--space-xs);
}
.ad-empty__title {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600; font-size: 15px;
  color: var(--fg-strong);
}
.ad-empty__sub {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.55;
  max-width: 40ch;
  margin-top: var(--space-3xs);
}
.ad-empty__ctas {
  display: flex; gap: var(--space-2xs);
  margin-top: var(--space-sm);
  align-items: center;
}

/* Sizes */
.ad-empty--sm { padding: var(--space-md) var(--space-sm); }
.ad-empty--sm .ad-empty__ring { width: 36px; height: 36px; margin-bottom: var(--space-2xs); }
.ad-empty--sm .ad-empty__title { font-size: 13px; }
.ad-empty--sm .ad-empty__sub { font-size: 12px; }

/* Inline — for table / chart slots: row layout, no fade-up jump. */
.ad-empty--inline {
  flex-direction: row;
  text-align: start;
  gap: var(--space-xs);
  padding: var(--space-sm);
  animation: none;
}
.ad-empty--inline .ad-empty__ring { width: 32px; height: 32px; margin-bottom: 0; flex: 0 0 auto; }
.ad-empty--inline .ad-empty__sub { margin-top: 1px; }
.ad-empty--inline .ad-empty__ctas { margin-top: 0; margin-inline-start: auto; }

/* Tinted rings */
.ad-empty--info    .ad-empty__ring { background: var(--primary-50);  color: var(--primary-700); }
.ad-empty--success .ad-empty__ring { background: var(--success-100); color: var(--success-700); }
.ad-empty--warning .ad-empty__ring { background: var(--warning-100); color: var(--warning-700); }
.ad-empty--error   .ad-empty__ring { background: var(--error-100);   color: var(--error-700); }

/* On-dark */
.ad-empty--dark .ad-empty__ring { background: rgba(255,255,255,0.08); color: var(--fg-on-dark-muted); }
.ad-empty--dark .ad-empty__title { color: var(--fg-on-dark); }
.ad-empty--dark .ad-empty__sub { color: rgba(255,255,255,0.65); }

/* ═══ Progress v2 ═══════════════════════════════════════════ */
.ad-progress { display: flex; flex-direction: column; gap: 6px; }
.ad-progress__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2xs);
}
.ad-progress__label { font-size: 13px; font-weight: 500; color: var(--fg-strong); }
.ad-progress__value {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--fg-muted);
}
.ad-progress__desc { font-size: 12px; color: var(--fg-muted); }

.ad-progress__track {
  height: 6px;
  background: var(--neutral-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ad-progress--sm .ad-progress__track { height: 4px; }
.ad-progress--lg .ad-progress__track { height: 8px; }

.ad-progress__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--admiral-blue);
  transition: width var(--motion-status-change);
}
.ad-progress--success .ad-progress__fill { background: var(--success-500); }
.ad-progress--warning .ad-progress__fill { background: var(--warning-700); }
.ad-progress--error   .ad-progress__fill { background: var(--error-500); }
.ad-progress--success .ad-progress__value { color: var(--success-700); }
.ad-progress--warning .ad-progress__value { color: var(--warning-700); }
.ad-progress--error   .ad-progress__value { color: var(--error-700); }

/* Indeterminate — a 40% band rides the shared ad-shimmer
   keyframe (background-position travel, left → right). */
.ad-progress__fill--indeterminate {
  width: 100%;
  background: linear-gradient(90deg,
    transparent 0% 30%,
    var(--admiral-blue) 30% 70%,
    transparent 70% 100%);
  background-size: 200% 100%;
  animation: ad-shimmer 1.4s linear infinite;
}
.ad-progress--success .ad-progress__fill--indeterminate { background-image: linear-gradient(90deg, transparent 0% 30%, var(--success-500) 30% 70%, transparent 70% 100%); }
.ad-progress--warning .ad-progress__fill--indeterminate { background-image: linear-gradient(90deg, transparent 0% 30%, var(--warning-700) 30% 70%, transparent 70% 100%); }
.ad-progress--error   .ad-progress__fill--indeterminate { background-image: linear-gradient(90deg, transparent 0% 30%, var(--error-500) 30% 70%, transparent 70% 100%); }

/* ── Circular ── */
.ad-progress-circle { position: relative; display: inline-grid; place-items: center; }
.ad-progress-circle svg { display: block; transform: rotate(-90deg); }
.ad-progress-circle__track { stroke: var(--neutral-200); fill: none; }
.ad-progress-circle__arc {
  stroke: var(--admiral-blue);
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--motion-status-change);
}
.ad-progress-circle--success .ad-progress-circle__arc { stroke: var(--success-500); }
.ad-progress-circle--warning .ad-progress-circle__arc { stroke: var(--warning-700); }
.ad-progress-circle--error   .ad-progress-circle__arc { stroke: var(--error-500); }
.ad-progress-circle__num {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--fg-strong);
}
/* Indeterminate — quarter arc rotates on the existing ad-spin
   keyframe (components.css). No new keyframes. */
.ad-progress-circle--indeterminate svg { animation: ad-spin 0.9s linear infinite; }

/* ── Steps ── */
.ad-progress-steps { display: flex; gap: var(--space-3xs); }
.ad-progress-steps__seg {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--neutral-200);
  transition: background var(--motion-status-change);
}
.ad-progress-steps__seg.is-filled { background: var(--admiral-blue); }
.ad-progress-steps--success .ad-progress-steps__seg.is-filled { background: var(--success-500); }
.ad-progress-steps--warning .ad-progress-steps__seg.is-filled { background: var(--warning-700); }
.ad-progress-steps--error   .ad-progress-steps__seg.is-filled { background: var(--error-500); }

/* ═══ Skeleton presets ══════════════════════════════════════
   Shimmer surface — gradient slides on the shared ad-shimmer
   keyframe, left → right (AIS feed time direction). */
.ad-skel {
  background: linear-gradient(90deg,
    var(--neutral-200) 25%,
    var(--neutral-100) 50%,
    var(--neutral-200) 75%);
  background-size: 200% 100%;
  animation: ad-shimmer 1.6s linear infinite;
  border-radius: var(--radius-xs);
}
.ad-skel--circle { border-radius: var(--radius-pill); }
.ad-skel--pill { border-radius: var(--radius-pill); }

/* Text block — stacked lines, last one short */
.ad-skel-text { display: flex; flex-direction: column; gap: var(--space-2xs); }
.ad-skel-text .ad-skel { height: 10px; }
.ad-skel-text .ad-skel:last-child { width: 60%; }

/* Composed surfaces share the real component chrome */
.ad-skel-surface {
  background: var(--bg-elevated);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ad-skel-table__head {
  display: flex; gap: var(--space-xs);
  padding: 12px 14px;
  border-bottom: 1px solid var(--neutral-100);
}
.ad-skel-table__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 0.6fr;
  gap: var(--space-2xs);
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--neutral-50);
}
/* Bones default to the 10px text-bone height (mirrors the JSX
   Skeleton default) so static usage never collapses to 0. */
.ad-skel-table__row .ad-skel { height: 10px; }
.ad-skel-table__row:last-child { border-bottom: 0; }

.ad-skel-kpi {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: 14px;
}
.ad-skel-card { padding: 16px 20px; display: flex; flex-direction: column; gap: var(--space-xs); }
.ad-skel-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.ad-skel-form__field { display: flex; flex-direction: column; gap: var(--space-3xs); }

/* ═══ Shortcut row ═════════════════════════════════════════
   Keyboard-shortcut display row — KbdCombo on the left, label,
   optional context tag. Ported from v1 Feedback into FeedbackV2. */
.ad-shortcut-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid var(--neutral-100);
}
.ad-shortcut-row .ad-kbd-combo { flex: 0 0 auto; min-width: 100px; }
.ad-shortcut-row__label { flex: 1; font-size: 13px; color: var(--fg-default); }
.ad-shortcut-row__context {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--neutral-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}