.article-share {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.share-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.share-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.share-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--navy);
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.share-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-button:hover {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  text-decoration: none;
  transform: translateY(-2px);
}

.share-button:focus-visible,
.toc button:focus-visible {
  outline: 3px solid #8fb1ff;
  outline-offset: 3px;
}

.share-button.is-copied {
  color: var(--navy);
  background: #dff7e9;
  border-color: #74c99b;
}

.share-status {
  min-height: 20px;
  color: var(--text);
  font-size: 13px;
}

.toc button {
  border: 1px solid var(--blue);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.toc button:hover {
  color: #fff;
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.toc button.is-copied {
  color: #0b5c35;
  background: #dff7e9;
  border-color: #74c99b;
}