/* site-share.css — premium share button + bottom-left dock */
/* 2026-06-12: Modern share UI, docked at content bottom left */

.site-share-dock { display: flex; justify-content: flex-start; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--site-border) 72%, transparent); }
.site-share-dock--compact { margin-top: 16px; padding-top: 12px; }
.site-share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border: 1px solid color-mix(in srgb, var(--site-accent) 22%, var(--site-border)); border-radius: 999px; background: linear-gradient(160deg, color-mix(in srgb, var(--site-surface) 88%, #ffffff), color-mix(in srgb, var(--site-bg) 70%, var(--site-surface))); color: var(--site-text); font-family: var(--site-font-family, inherit); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.75); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.site-share-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--site-accent) 42%, var(--site-border)); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 8px 20px color-mix(in srgb, var(--site-accent) 12%, rgba(15, 23, 42, 0.1)); }
.site-share-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 2px rgba(15, 23, 42, 0.06); }
.site-share-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-accent) 22%, transparent), 0 4px 14px rgba(15, 23, 42, 0.06); }
.site-share-btn-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, color-mix(in srgb, var(--site-accent) 92%, #ffffff), var(--site-accent)); color: var(--site-accent-contrast, #ffffff); font-size: 0.72rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 8px color-mix(in srgb, var(--site-accent) 24%, transparent); }
.site-share-btn-text { padding-right: 1px; color: color-mix(in srgb, var(--site-text) 92%, var(--site-muted)); }

@media (max-width: 768px) {
  .site-share-dock { margin-top: 18px; padding-top: 14px; }
  .site-share-btn { padding: 4px 10px 4px 5px; font-size: 0.74rem; gap: 6px; }
  .site-share-btn-icon { width: 24px; height: 24px; font-size: 0.68rem; }
}