/* css/ux-share.css - modern, neutral share UI (uniform icons, 2025 style) */
:root{
  --ux-bg:#ffffff;
  --ux-ink:#222428;
  --ux-muted:#6b7280;
  --ux-border:#e6e9ee;
  --ux-radius:10px;
  --ux-gap:8px;
  --ux-shadow: 0 6px 18px rgba(18,22,28,0.06);
}

/* container */
.szone{display:inline-flex;align-items:center;gap:var(--ux-gap);font-family:inherit}

/* action group (main buttons) */
.s-actions{display:inline-flex;gap:6px;align-items:center}
.sbtn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--ux-radius);border:1px solid var(--ux-border);background:var(--ux-bg);color:var(--ux-ink);cursor:pointer;font-size:14px;line-height:1;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease;color:var(--ux-ink)
}

/* ghost variant kept neutral (no brand colors) */
.sbtn-ghost{background:linear-gradient(180deg,#fff,#fbfdff);}

/* main button emphasis - subtle elevation */
.sbtn-main{box-shadow:none}
.sbtn:hover{transform:translateY(-2px);box-shadow:var(--ux-shadow)}
.sbtn:active{transform:translateY(0);box-shadow:none}

/* icon size and color inherit from currentColor */
.sbtn-icon{width:18px;height:18px;fill:currentColor;display:block}
.sbtn-label{display:inline-block;color:inherit}

/* copy small tweak */
.sbtn-copy{min-width:0}

/* providers (fallback) - neutral icon buttons */
.sproviders{display:inline-flex;gap:6px;align-items:center}
.sproviders[hidden]{display:none}
.sprovider{display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:999px;border:1px solid var(--ux-border);background:var(--ux-bg);width:40px;height:40px;min-width:40px;transition:transform .12s ease,box-shadow .12s ease;color:var(--ux-muted)}
.sprovider .sbtn-icon{width:16px;height:16px}
.sprovider:hover{transform:translateY(-2px);box-shadow:var(--ux-shadow);color:var(--ux-ink)}

/* flash message (feedback) */
.ux-flash{position:relative;opacity:0;transition:opacity .18s ease-in-out,transform .18s ease;transform:translateY(-6px);background:var(--ux-ink);color:#fff;padding:6px 10px;border-radius:8px;font-size:13px}
.ux-flash.visible{opacity:1;transform:translateY(0)}

/* accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* responsive: hide labels on small screens and keep icons only */
@media (max-width:520px){
  .sbtn-label{display:none}
  .sbtn{padding:8px}
}

/* ensure consistent focus outline for a11y */
.sbtn:focus,.sprovider:focus{outline:3px solid rgba(34,45,65,0.08);outline-offset:2px}

/* small spacing adjustments if group is inline with other toolbar items */
.article-toolbar + .szone, .szone + .article-toolbar{margin-left:6px}