/* core/lib/ui/share.css — social share buttons primitive (.ui-share).
   Tokens (override per site/surface):
     --share-gap, --share-margin, --share-size, --share-radius,
     --share-border, --share-bg, --share-color, --share-accent,
     --share-label-color */
.ui-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--share-gap, .5rem);
  margin: var(--share-margin, 1.5rem 0);
}
.ui-share__label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--share-label-color, var(--muted2, #6b7280));
  margin-right: .25rem;
}
.ui-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--share-size, 40px);
  height: var(--share-size, 40px);
  padding: 0;
  border: 1px solid var(--share-border, rgba(0, 0, 0, .12));
  border-radius: var(--share-radius, 50%);
  background: var(--share-bg, transparent);
  color: var(--share-color, var(--muted2, #6b7280));
  cursor: pointer;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease,
              border-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ui-share__btn:hover,
.ui-share__btn:focus-visible {
  transform: translateY(-2px);
  color: #fff;
  outline: none;
}
.ui-share__btn svg { display: block; }

/* Brand hover colors */
.ui-share__btn--x:hover,         .ui-share__btn--x:focus-visible         { background: #000;     border-color: #000; }
.ui-share__btn--linkedin:hover,  .ui-share__btn--linkedin:focus-visible  { background: #0a66c2; border-color: #0a66c2; }
.ui-share__btn--whatsapp:hover,  .ui-share__btn--whatsapp:focus-visible  { background: #25d366; border-color: #25d366; }
.ui-share__btn--reddit:hover,    .ui-share__btn--reddit:focus-visible    { background: #ff4500; border-color: #ff4500; }
.ui-share__btn--instagram:hover, .ui-share__btn--instagram:focus-visible { background: #e1306c; border-color: #e1306c; }
.ui-share__btn--email:hover,     .ui-share__btn--email:focus-visible     { background: #0072c6; border-color: #0072c6; }
.ui-share__btn--copy:hover,      .ui-share__btn--copy:focus-visible,
.ui-share__btn--native:hover,    .ui-share__btn--native:focus-visible    { background: var(--share-accent, #2563eb); border-color: var(--share-accent, #2563eb); }

/* Mobile: keep touch targets ≥44px and center the row with the label on its
   own line — reads cleaner than a left-aligned label + wrapping icons. */
@media (max-width: 600px) {
  .ui-share {
    justify-content: center;
    gap: var(--share-gap-mobile, .85rem);
  }
  .ui-share__label {
    flex-basis: 100%;
    text-align: center;
    margin: 0 0 .35rem;
  }
  .ui-share__btn { width: 46px; height: 46px; }
}

/* Tiny built-in toast fallback (only used when window.toast is absent) */
.ui-share-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: #111827;
  color: #fff;
  font-size: .9rem;
  padding: .6rem 1rem;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 99999;
}
.ui-share-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}