/* Share affordances (Track B). Inherits the palette tokens from style.css; fallbacks keep it honest standalone. */
.share {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 16px; margin-top: 16px;
  font-size: 13px; line-height: 1.45; color: var(--muted, #8a857b);
}
.share-label { font-size: 12px; font-weight: 500; color: var(--muted, #8a857b); }
.share-btn {
  background: none; border: 1px solid var(--rule, #e6e2d9); border-radius: 0;
  padding: 3px 10px; min-height: 28px; cursor: pointer;
  font: 400 13px/1.45 inherit; font-family: inherit; color: var(--fg2, #4a4843);
}
.share-btn:hover { color: var(--fg, #161616); border-color: var(--rule-strong, #cfcabf); }
.share-btn:active { border-color: var(--accent, #7a5c2e); }
.share-links { display: flex; align-items: center; gap: 8px; }
.share-links a { color: var(--fg2, #4a4843); }
.share-links a:hover { text-decoration: underline; text-decoration-color: var(--accent, #7a5c2e); text-underline-offset: 3px; }
.share-links .dot { color: var(--muted, #8a857b); }
.share-note {
  font-size: 12px; font-weight: 500; color: var(--accent, #7a5c2e);
  opacity: 0; transition: opacity 120ms linear;
}
.share-note.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .share-note { transition: none; } }
@media (max-width: 560px) { .share { gap: 8px 12px; } .share-label { flex-basis: 100%; } }