/* AppStore theme — P2.2 share sheet.
   Sits ABOVE the article overlay (z-index 90/91, expand.css) — the share
   sheet is a modal nested on top of an already-open article, not a
   replacement for it, so everything here starts at z-index 200. */

.share-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.share-overlay .share-mask {
  position: absolute; inset: 0;
  background: rgb(0 0 0 / .45);
  opacity: 0;
  cursor: default;
}
:root[data-theme="light"] .share-overlay .share-mask { background: rgb(0 0 0 / .32); }

.share-sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 24px;
  padding: 20px;
  opacity: 0;
  transform: scale(.96);
}
@media (max-width: 699px) {
  .share-sheet { max-width: 92vw; }
}

.share-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.share-head h2 {
  font-size: var(--fs-headline);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.btn-share-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip-bg);
  color: var(--text-secondary);
  border: none;
}

.share-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 1440;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--chip-bg);
}
.share-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.share-canvas-wrap .share-skeleton {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-footnote);
  color: var(--text-tertiary);
}
.share-canvas-wrap .share-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .06) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: share-skeleton-sheen 1.2s ease-in-out infinite;
}
@keyframes share-skeleton-sheen {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

.share-actions {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.share-action {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-primary);
  background: none; border: none;
}
.share-action__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip-bg);
  transition: transform 150ms;
}
.share-action:active .share-action__icon { transform: scale(.94); }
.share-action__label {
  font-size: 12px;
  color: var(--text-secondary);
}

.share-link {
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgb(120 120 128 / .12);
  margin-bottom: 14px;
}
.share-link .url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-footnote);
  color: var(--text-secondary);
}
.share-link .copy {
  flex: 0 0 auto;
  border: none;
  background: var(--pill-bg);
  color: var(--text-primary);
  font-size: var(--fs-footnote);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-chip);
  min-width: 64px;
}
.share-link .copy.is-copied { color: #34C759; }

.share-save {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 13px;
  background: var(--tint);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 600;
}
.share-save:active { opacity: .85; }

.share-toast {
  position: fixed;
  left: 50%; bottom: 32px;
  transform: translateX(-50%);
  z-index: 210;
  padding: 10px 18px;
  border-radius: var(--radius-chip);
  background: rgb(28 28 30 / .92);
  color: #fff;
  font-size: var(--fs-footnote);
  opacity: 0;
  pointer-events: none;
}