/* Sharing to Facebook: the Social page and the share dialog. docs/SOCIAL.md.
   The dialog reuses the newsletter dialog's frame (newsletter.css). */
.social-card { max-width: 44rem; margin-bottom: 1.5rem; }
.social-page { display: flex; gap: .85rem; align-items: center; }
.social-page img, .sp-to img, .social-choice img { border-radius: 50%; object-fit: cover; }
.social-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1877f2; color: #fff; font-weight: 800; font-size: 1.2rem; font-family: Helvetica, Arial, sans-serif; }
.social-choice { padding: .35rem 0; }
.fb-button { background: #1877f2; color: #fff; }
.fb-button:hover { background: #166fe5; color: #fff; }
.badge.share-posted { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.badge.share-failed { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.badge.share-scheduled, .badge.share-posting { background: color-mix(in srgb, var(--link) 12%, transparent); color: var(--link); border-color: color-mix(in srgb, var(--link) 30%, transparent); }

.nl-dialog.sp-dialog { width: min(560px, calc(100vw - 2rem)); height: auto; max-height: calc(100vh - 2rem); }
.sp-panel { padding: 0 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.sp-form { display: flex; flex-direction: column; gap: .9rem; }
.sp-to { display: flex; gap: .65rem; align-items: center; font-size: .9rem; }
.sp-message textarea { font-size: 1rem; line-height: 1.45; resize: vertical; }
.sp-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-subtle); }
.sp-card img { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; display: block; }
.sp-card-text { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .8rem; font-size: .9rem; }
.sp-card-host { font-size: .72rem; color: var(--fg-muted); letter-spacing: .02em; }
.sp-hint { margin-top: -.5rem; }
.sp-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: .9rem; }
.sp-foot .button:disabled { opacity: .5; cursor: not-allowed; }
.sp-done { padding: 1.5rem 0 .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The editor's toast can carry a button ("Share on Facebook"). */
.pe-toast.is-on:has(.pe-toast-action) { pointer-events: auto; }
.pe-toast-action { margin-left: .9rem; font: inherit; font-weight: 650; color: #fff; background: #1877f2; border: 0; border-radius: 6px; padding: .3rem .7rem; cursor: pointer; }