/* ============ Share bar ============ */
.share-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  background: color-mix(in srgb, var(--bg) var(--glass-opacity), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
/* Persistent global container for the mobile sticky share bar. It lives in
   the layout (like the header and FAB) rather than the swapped content, so
   it keeps one stable element across same-document navigations and its
   reveal/exit animations play smoothly instead of recompeting with each
   view transition. Hidden on desktop; styled only inside <=640px. */
.share-sticky { display: none; }
.share-label {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.share-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.share-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.share-link svg { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .share-link:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
}
@media (hover: hover) and (pointer: fine) {
  .share-twitter:hover { background: #000; border-color: #000; }
}
@media (hover: hover) and (pointer: fine) {
  .share-facebook:hover { background: #1877f2; border-color: #1877f2; }
}
@media (hover: hover) and (pointer: fine) {
  .share-whatsapp:hover { background: #25d366; border-color: #25d366; }
}
@media (hover: hover) and (pointer: fine) {
  .share-linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
}
@media (hover: hover) and (pointer: fine) {
  .share-copy:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
}

@media (max-width: 640px) {
  /* The in-flow share bar is desktop-only; on mobile the persistent global
     #share-sticky bar (rendered in the layout, outside the swapped content)
     takes over, so its reveal/exit never competes with the view transition. */
  .share-bar { display: none; }

  .share-sticky {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    margin: 0;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    background: color-mix(in srgb, var(--bg) var(--glass-opacity), transparent);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: var(--shadow-md);
    /* Shown/hidden with a quick fade. body.has-sticky-share (flipped once the
       swap has settled) and .is-out (flipped just before navigating away)
       drive this persistent element. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease-out, visibility 0s 0.18s;
  }
  body.has-sticky-share .share-sticky {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease-out, visibility 0s;
  }
  .share-sticky.is-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease-out, visibility 0s 0.18s;
  }
  /* Hidden once the footer is in view (bottom of the page) — same as the
     back-to-top FAB — so the footer needs no extra padding to clear it. */
  body.has-sticky-share .share-sticky.is-in-footer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease-out, visibility 0s 0.18s;
  }
  .share-sticky .share-label { display: none; }
  .share-sticky .share-links { flex: 1; gap: 2px; flex-wrap: nowrap; }
  .share-sticky .share-link {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    font-size: 0.62rem;
    border: none;
    background: transparent;
    border-radius: 12px;
  }
  .share-sticky .share-link svg { margin: 0; }
  .share-sticky .share-link:active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
  @media (hover: hover) and (pointer: fine) {
    .share-sticky .share-link:hover { transform: none; }
  }

  /* FAB floats above the sticky share bar. */
  body.has-sticky-share .back-top {
    bottom: calc(102px + env(safe-area-inset-bottom, 0px));
  }
  @media (prefers-reduced-motion: reduce) {
    .share-sticky, .share-sticky.is-out, .share-sticky.is-in-footer { transition: none; }
    .back-top { transition-duration: 0.01s; }
  }
}
/* keep scrolled content clear of the fixed bar */
@media (max-width: 640px) {
  body.is-article main .container { padding-bottom: 72px; }
}


body.glass-off .share-bar {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.glass-off .share-sticky {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}