/* ============================================================
   share.css — Botões de compartilhamento (tema dark do blog)
   Reaproveita os tokens já definidos em article.css / blog.html
   (--surface-2, --border, --t-*, --cyan, --indigo, --green).
   ============================================================ */
.share{display:flex;align-items:center;gap:9px;flex-wrap:wrap;max-width:var(--readw,720px);margin:26px auto;padding:0 24px}
.share-lbl{font-family:var(--mono),"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t-500);font-weight:700;margin-right:3px}

.sbtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--t-600);cursor:pointer;text-decoration:none;transition:transform .15s ease,border-color .15s,color .15s,background .15s}
.sbtn svg{width:18px;height:18px;display:block}
.sbtn:hover{transform:translateY(-2px);color:#fff;background:var(--surface)}
.sbtn.wa:hover{border-color:#25D366;color:#25D366}
.sbtn.li:hover{border-color:#0A66C2;color:#7ab6ee}
.sbtn.x:hover{border-color:#e7e9ea;color:#fff}
.sbtn.cp:hover{border-color:var(--cyan);color:var(--cyan)}
.sbtn.nt:hover{border-color:var(--indigo,#4f46e5);color:#a9b6ff}
.sbtn.ok{border-color:var(--green);color:var(--green)}
.sbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Variante compacta (cards do índice do blog) */
.share.compact{margin:0;padding:0;gap:7px;max-width:none}
.share.compact .share-lbl{display:none}
.share.compact .sbtn{width:34px;height:34px;border-radius:9px}
.share.compact .sbtn svg{width:15px;height:15px}