.article-share-trigger,
.article-share-dialog button {
  min-height: 44px;
  border: 2px solid var(--ink, #102a43);
  border-radius: 0;
  padding: 11px 14px;
  color: var(--ink, #102a43);
  background: var(--mint, #5cc8a1);
  box-shadow: 3px 3px 0 var(--ink, #102a43);
  font: 900 13px/1.35 Maven, system-ui, sans-serif;
  cursor: pointer;
}

.article-share-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
  background: var(--paper, #f7fbff);
}

.article-share-trigger::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  flex: none;
  margin: 0 9px 0 4px;
  color: var(--blue, #2d6cdf);
  background: currentColor;
  box-shadow: -4px 0, 0 -4px, 0 4px, 4px -4px, 8px -8px, 8px -4px, 12px -8px, 12px -4px, 4px 4px, 8px 4px, 8px 8px, 12px 4px, 12px 8px;
}

.article-share-trigger:hover,
.article-share-dialog button:hover {
  background: var(--mint2, #e4f8f0);
}

.article-share-trigger:active,
.article-share-dialog button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink, #102a43);
}

.article-share-trigger:focus-visible,
.article-share-dialog button:focus-visible,
.article-share-url:focus-visible {
  outline: 3px solid var(--blue, #2d6cdf);
  outline-offset: 4px;
}

.article-share-trigger:disabled,
.article-share-dialog button:disabled {
  opacity: .65;
  cursor: default;
}

.article-share-dialog {
  box-sizing: border-box;
  width: min(540px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  border: 3px solid var(--ink, #102a43);
  border-radius: 0;
  padding: 25px 22px 18px;
  color: var(--ink, #102a43);
  background: var(--paper, #f7fbff);
  box-shadow: 5px 5px 0 var(--mint, #5cc8a1), 9px 9px 0 var(--ink, #102a43);
  font-family: Maven, system-ui, sans-serif;
}

.article-share-dialog::backdrop {
  background: rgba(16, 42, 67, .72);
}

.article-share-dialog[open] {
  animation: article-share-appear .15s steps(3, end);
}

.article-share-dialog .article-share-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  background: #fff;
  font: 900 26px/1 Maven,system-ui,sans-serif;
}

.article-share-kicker {
  display: block;
  margin: 3px 46px 10px 0;
  color: var(--muted, #48687c);
  font: 900 10px/1.5 Maven,system-ui,sans-serif;
  letter-spacing: .06em;
}

.article-share-dialog h2 {
  margin: 0 35px 12px 0;
  font-size: 26px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.article-share-dialog p {
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.article-share-title {
  margin: 17px 0;
  padding: 12px;
  border-left: 6px solid var(--mint, #5cc8a1);
  background: #fff;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.article-share-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
}

.article-share-url {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 2px solid var(--ink, #102a43);
  border-radius: 0;
  padding: 11px 10px;
  color: var(--ink, #102a43);
  background: #fff;
  font: 400 16px/1.35 Maven,system-ui,sans-serif;
  user-select: text;
  -webkit-user-select: text;
}

.article-share-dialog .article-share-local-note {
  margin: 10px 0 0;
  color: var(--muted, #48687c);
  font-size: 12px;
}

.article-share-actions {
  display: grid;
  gap: 12px;
  margin: 19px 3px 0 0;
}

.article-share-dialog .article-share-device {
  background: #fff;
}

.article-share-dialog [hidden] {
  display: none !important;
}

.article-share-status {
  min-height: 21px;
  margin: 14px 0 0;
}

@keyframes article-share-appear {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 420px) {
  .article-share-dialog {
    padding: 22px 16px 16px;
  }

  .article-share-dialog h2 {
    font-size: 24px;
  }

  .article-share-trigger {
    min-height: 48px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-share-dialog[open] { animation: none; }
  .article-share-trigger:active,
  .article-share-dialog button:active { transform: none; }
}