.article-share {
  box-sizing: border-box;
  width: 100%;
  max-width: 56rem;
  margin: 0.65rem auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: left;
}

.article-share__label { flex: 0 0 auto; color: #4b5563; font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.article-share__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.article-share__button {
  box-sizing: border-box; display: inline-flex; height: 2.5rem; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 0.45rem 0.75rem; border: 1px solid transparent; border-radius: 0.5rem;
  color: #fff; font: inherit; font-size: 0.8125rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: filter 0.15s, transform 0.15s;
}
.article-share__button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.article-share__button:active { transform: translateY(1px); }
.article-share__button:focus-visible { outline: 3px solid rgba(225, 29, 72, 0.3); outline-offset: 2px; }
.article-share__button[aria-disabled="true"], .article-share__button:disabled { cursor: not-allowed; filter: grayscale(0.65); opacity: 0.55; transform: none; }
.article-share__button--x { background: #18181b; }
.article-share__button--bluesky { background: #1684e8; }
.article-share__button--line { background: #18a84b; }
.article-share__button--copy { border-color: #d1d5db; background: #f3f4f6; color: #374151; }
.article-share__button--native { background: #e11d48; }
.article-share__icon { width: 1rem; height: 1rem; flex: 0 0 1rem; fill: currentColor; }
.article-share__text-short { display: none; }
.article-share__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .article-share { margin-block: 0.75rem; display: block; }
  .article-share__label { display: block; margin-bottom: 0.45rem; }
  .article-share__buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .article-share__button { width: 100%; height: 2.5rem; padding-inline: 0.4rem; }
  .article-share__text-long { display: none; }
  .article-share__text-short { display: inline; }
}