/* ============================================
   SHARE CARD — quiet trigger button + opt-in modal
   ============================================ */
/* borderless glyph — blends into the readiness band like a native control */
.sharecard-btn {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; padding: 0; margin-left: 6px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: color-mix(in srgb, var(--text-secondary) 75%, transparent);
  cursor: pointer; vertical-align: -5px;
  transition: color .15s ease, background .15s ease;
}
.sharecard-btn:hover {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

.sharecard-modal { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; }
.sharecard-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 7, 14, .72); backdrop-filter: blur(4px); }
.sharecard-modal__panel {
  position: relative; max-width: min(92vw, 760px); width: 100%;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  animation: sharecardIn .28s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes sharecardIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.sharecard-modal__panel canvas {
  width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.sharecard-modal__close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); background: #111827; color: #e5e7eb;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.sharecard-modal__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sharecard-modal__actions .btn { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 560px) {
  .sharecard-modal__close { top: 6px; right: 6px; }
}