/* The share window (templates/_share_dialog.html, static/js/share-card.js):
   a card's picture, and the ways to post its link. */
.share-dialog {
  width: min(640px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 0;
  border: none;
  border-radius: 18px;
  background: white;
  color: var(--color-text-primary);
  box-shadow: 0 24px 64px rgba(16, 46, 39, 0.35);
}
.share-dialog::backdrop { background: rgba(11, 30, 26, 0.55); }
.share-body { padding: 18px 20px 20px; }
.share-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.share-head h2 { flex: 1; margin: 0; font-family: 'Lora', Georgia, serif; font-size: 1.25rem; font-weight: 700; }
.share-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: none; border-radius: 999px;
  background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.share-close:hover { background: #f1f3f4; color: var(--color-text-primary); }
.share-preview {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630;
  border-radius: 12px; background: #155044;
}
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.share-action {
  flex: 1 1 160px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 16px; border-radius: 8px;
  border: 1.5px solid var(--color-forest-main); background: white; color: var(--color-forest-main);
  font: inherit; font-size: 0.9rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.share-action:hover { background: #f1f7f5; }
.share-action.share-facebook { flex-basis: 100%; border-color: #1877f2; background: #1877f2; color: white; }
.share-action.share-facebook:hover { background: #0f66d6; }
.share-link {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 6px 6px 6px 14px; border-radius: 8px; background: #f4f6f7;
}
.share-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; color: var(--color-text-muted); }
.share-link .share-action { flex: none; padding: 8px 16px; }
.share-dialog [hidden] { display: none !important; }

/* Not shareable yet: the window says why, and how, in place of its ways. */
.share-dialog.is-locked .share-preview,
.share-dialog.is-locked .share-actions,
.share-dialog.is-locked .share-link { display: none; }
.share-dialog:not(.is-locked) .share-locked { display: none; }
.share-locked { padding: 4px 0 6px; }
.share-locked p { margin: 0 0 12px; color: var(--color-text-secondary); }

/* A page's own sections below the ways to share. */
.share-extra-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border-subtle); }
.share-extra-section h3 { margin: 0 0 10px; font-size: 1rem; }
.share-status { display: block; min-height: 1.2em; margin-top: 10px; font-size: 0.85rem; color: var(--color-text-muted); }