/* LivePulse v1.0.8 — Plowz & Mowz social proof plugin
 * Token-driven (uses --pm-*, --ink-*, --fs-*, --s-*, --r-*, --shadow-*, --dur-*, --ease-out).
 * Audit pass 2026-05-08 — fixes: green token mismatch, contrast on muted text,
 * hardcoded sizes/spacing/radii replaced with tokens, dead ::before removed,
 * box-shadow consolidated, ripple slowed and reuses pill-pulse pattern,
 * close button reduced visually, verified row removed.
 */

/* ---------- Counter (inline, near the hero CTA) ---------- */
.livepulse-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--ink-700);
  letter-spacing: -0.005em;
}
.livepulse-counter__pulse {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--pm-green-700);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(31, 122, 58, .18);
  animation: livepulse-pulse 2.4s ease-in-out infinite;
}
@keyframes livepulse-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(31, 122, 58, .18); }
  50%      { box-shadow: 0 0 0 6px rgba(31, 122, 58, .10); }
}
.livepulse-counter__num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.livepulse-counter__label { color: var(--ink-500); }
@media (prefers-reduced-motion: reduce) {
  .livepulse-counter__pulse { animation: none; }
}

/* ---------- Floating root (mount target) ---------- */
.livepulse-root {
  position: fixed;
  z-index: 9000;            /* below modals/Intercom; above page */
  pointer-events: none;
  font-family: var(--font-body);
}
.livepulse-root > * { pointer-events: auto; }

/* Desktop placements */
.livepulse-root--desktop-bottom-right {
  right: var(--s-6);
  bottom: var(--s-6);
  max-width: 360px;
}
.livepulse-root--desktop-bottom-left {
  left: var(--s-6);
  bottom: var(--s-6);
  max-width: 360px;
}

/* Mobile top placement — anchored below sticky header */
.livepulse-root--mobile-top {
  left: var(--s-4);
  right: var(--s-4);
  top: calc(var(--header-h, 76px) + env(safe-area-inset-top, 0px) + var(--s-2));
  display: flex;
  justify-content: center;
}
.livepulse-root--mobile-bottom {
  left: var(--s-4);
  right: var(--s-4);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
}

/* ---------- The card ---------- */
.livepulse-card {
  --card-accent: var(--pm-green-700);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  max-width: 360px;
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), inset 4px 0 0 var(--card-accent);
  /* enter state */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  will-change: opacity, transform;
}

/* Tone variants */
.livepulse-card--tone-green { --card-accent: var(--pm-green-700); }
.livepulse-card--tone-snow  { --card-accent: var(--pm-snow-500);  }
.livepulse-card--tone-amber { --card-accent: var(--pm-amber-500); }
.livepulse-card--tone-clay  { --card-accent: var(--pm-clay-500);  }

/* Per-placement enter direction */
.livepulse-root--desktop-bottom-right .livepulse-card { transform: translateX(16px); }
.livepulse-root--desktop-bottom-left  .livepulse-card { transform: translateX(-16px); }
.livepulse-root--mobile-top           .livepulse-card { transform: translateY(-12px); }
.livepulse-root--mobile-bottom        .livepulse-card { transform: translateY(12px); }

.livepulse-card.livepulse-card--entered {
  opacity: 1;
  transform: none;
}

/* Leaving */
.livepulse-card--leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

/* Reduced motion: fade only */
.livepulse-root--reduced-motion .livepulse-card,
.livepulse-root--reduced-motion .livepulse-card.livepulse-card--entered,
.livepulse-root--reduced-motion .livepulse-card.livepulse-card--leaving {
  transform: none !important;
  transition: opacity var(--dur-fast) ease;
}

/* ---------- Card sub-parts ---------- */
.livepulse-card__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 10%, white);
  flex-shrink: 0;
}
.livepulse-card__icon svg { width: 22px; height: 22px; }

.livepulse-card__body { min-width: 0; }
.livepulse-card__line1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--ink-900);
  line-height: 1.3;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.livepulse-card__line2 {
  font-size: var(--fs-13);
  color: var(--ink-600);            /* WCAG AA at 13px */
  line-height: 1.35;
  margin-top: 2px;
}
.livepulse-card__verb {
  color: var(--card-accent);
  font-weight: 600;
}
.livepulse-card__dot { margin: 0 4px; opacity: .5; }
.livepulse-card__time { color: var(--ink-500); }   /* was --ink-400, failed AA */

.livepulse-card__close {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink-300);             /* recessive — design audit */
  cursor: pointer;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.livepulse-card__close:hover,
.livepulse-card__close:focus-visible {
  color: var(--ink-700);
  background: var(--ink-50);
  outline: none;
}
.livepulse-card__close svg { width: 12px; height: 12px; }

/* Mobile: tighter padding, smaller line1, allow line2 to wrap if very long combos */
@media (max-width: 768px) {
  .livepulse-card {
    padding: var(--s-3) var(--s-3);
    max-width: 100%;
    gap: var(--s-2);
  }
  .livepulse-card__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
  }
  .livepulse-card__icon svg { width: 18px; height: 18px; }
  .livepulse-card__line1 { font-size: var(--fs-13); }
  .livepulse-card__line2 { font-size: var(--fs-12); }
}

/* ============================================================
   v1.0.14 — ProveSource-style refinements
   New: line3 row with time + Verified pip; subtle city-suffix tint.
   ============================================================ */

/* Line 1: name bold, city in muted parens */
.livepulse-card__city {
  color: var(--ink-500);
  font-weight: 500;
}

/* Line 3: time + verified attribution */
.livepulse-card__line3 {
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.4;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.livepulse-card__sep { opacity: 0.45; }
.livepulse-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pm-green-700);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.livepulse-card__verified-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* The line2 verb-only row no longer gets the trailing dot/time pattern. */
.livepulse-card__line2 .livepulse-card__dot,
.livepulse-card__line2 .livepulse-card__time {
  display: none;
}