/* ──────────────────────────────────────────────────────────────────────────
   Win-moment share component — scoped "pcshare-" classes ONLY.
   Reads existing design tokens from styles.css (never defines new colors), so
   dark mode + reduced-motion come for free. NOT a popup/banner: a quiet caption
   + one demoted ghost button, always subordinate to the real Download CTA.
   See marketing/share-ux-spec-2026-06-28.md.
   ────────────────────────────────────────────────────────────────────────── */

/* Container: a single horizontal row, no fill/border/shadow by default. */
.pcshare-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--surface-2, #f4f4f5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary); /* accent edge to draw the eye */
  border-radius: 14px;
}

.pcshare-caption {
  margin: 0;
  flex: 1 1 240px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text);
  font-weight: 500;
}

/* Filled, on-brand share button so the win-moment ask is actually noticed.
   Safe because it only appears AFTER the download/export already succeeded —
   the primary action is done, so this never competes with it. */
.pcshare-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;            /* match dl- tap targets */
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
}
.pcshare-btn:hover {
  opacity: 0.9;
}
.pcshare-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pcshare-dismiss {
  min-height: 44px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.pcshare-dismiss:hover { text-decoration: underline; color: var(--text-secondary); }

/* Shared focus ring — matches the dl- pattern. */
.pcshare-btn:focus-visible,
.pcshare-dismiss:focus-visible,
.pcshare-menu-item:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* Desktop fallback menu (Threads / X / Copy link). Anchored to the button. */
.pcshare-menu-wrap { position: relative; display: inline-flex; }
.pcshare-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 168px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pcshare-menu[hidden] { display: none; }
.pcshare-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
.pcshare-menu-item:hover { background: var(--surface-2); }

/* Entrance: fade+rise, then ONE soft attention pulse so it gets noticed. */
.pcshare-reveal {
  animation: pcshare-fade-rise 220ms ease-out both,
             pcshare-attention 1400ms ease-out 240ms 1;
}
@keyframes pcshare-fade-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Single expanding ring, fades out — uses the brand ink, no new color. */
@keyframes pcshare-attention {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.22); }
  100% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pcshare-reveal { animation: pcshare-fade-only 200ms ease-out both; }
  @keyframes pcshare-fade-only {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}