/* ===================================================================
   Digital Disruption Matrix 2026 — shared SHARE module (share.js)
   Share menus (Copy link · LinkedIn · native share · Download image)
   used on the homepage key-finding card/charts, injected into the
   topbar of every interior page, AND loaded inside the chart embeds.
   Every token carries a hardcoded fallback so the menu renders the
   same whether or not the host/embed defines the matching custom prop.
   =================================================================== */

.share{position:relative;display:inline-flex;flex:none}

/* ---- card / chart pill button (NOT the topbar .btn variant) ---- */
.share-btn:not(.btn){display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:30px;
  font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2,#9aa7b5);background:transparent;border:1px solid var(--line2,#2a3340);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.share-btn:not(.btn):hover,.share.open .share-btn:not(.btn){color:var(--tech,var(--accent,#e08a30));border-color:var(--tech,var(--accent,#e08a30));background:var(--accent-tint,rgba(224,138,48,.14))}
.share-btn:not(.btn) svg{width:15px;height:15px}
.share-btn.icon-only:not(.btn){width:30px;height:30px;padding:0;justify-content:center}
.share-btn.icon-only:not(.btn) svg{width:15px;height:15px}

/* chart-corner share buttons sit quietly until hovered */
.chart{position:relative}
.chart .share{position:absolute;top:-4px;left:-4px;z-index:7}
.chart .share-btn.icon-only:not(.btn){color:var(--ink3,#828e9e);border-color:transparent;background:transparent}
.chart .share-btn.icon-only:not(.btn):hover,.chart .share.open .share-btn:not(.btn){color:var(--tech,var(--accent,#e08a30));border-color:var(--tech,var(--accent,#e08a30));background:var(--accent-tint,rgba(224,138,48,.14))}

/* injected per-chart share: top-right corner of the chart wrapper (opposite the (i)) */
.chart-share{position:absolute;top:0;right:0;z-index:20}
.chart-share .share-btn.icon-only:not(.btn){color:var(--ink3,#828e9e);border-color:transparent;background:transparent}
.chart-share .share-btn.icon-only:not(.btn):hover,.chart-share.open .share-btn:not(.btn){color:var(--tech,var(--accent,#e08a30));border-color:var(--tech,var(--accent,#e08a30));background:var(--accent-tint,rgba(224,138,48,.14))}

/* ---- topbar .btn variant (injected by share.js) ---- */
.btn.share-btn{cursor:pointer}
.share.open .btn-ghost,.share .btn-ghost:hover{border-color:var(--accent,#e08a30);color:var(--accent,#e08a30);background:var(--accent-tint,rgba(224,138,48,.14))}

/* ---- the dropdown menu ---- */
.share-menu{position:absolute;z-index:50;top:calc(100% + 8px);right:0;min-width:188px;
  background:var(--panel2,#161b22);border:1px solid var(--line2,#2a3340);border-radius:11px;padding:6px;
  box-shadow:0 20px 46px -18px rgba(0,0,0,.85);
  opacity:0;transform:translateY(-6px) scale(.985);pointer-events:none;
  transition:opacity .18s,transform .18s}
.share-menu.left{right:auto;left:0}
.share.open .share-menu{opacity:1;transform:none;pointer-events:auto}
.share-menu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 11px;border:0;border-radius:7px;background:transparent;cursor:pointer;
  font-family:var(--sans,'IBM Plex Sans',-apple-system,sans-serif);font-size:13.5px;color:var(--read,#c9d2dd);transition:background .15s,color .15s}
.share-menu button:hover{background:var(--bg2,#0d1117);color:var(--ink,#e8eef5)}
.share-menu button svg{width:16px;height:16px;flex:none;color:var(--ink2,#9aa7b5);transition:color .15s}
.share-menu button:hover svg{color:var(--tech,var(--accent,#e08a30))}
.share-menu button[data-busy]{opacity:.6;pointer-events:none}

/* ---- toast ---- */
.share-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);z-index:60;
  display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:30px;
  background:var(--panel2,#161b22);border:1px solid var(--tech,var(--accent,#e08a30));color:var(--ink,#e8eef5);
  font-family:var(--sans,'IBM Plex Sans',-apple-system,sans-serif);font-size:14px;box-shadow:0 18px 44px -16px rgba(0,0,0,.8);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.share-toast svg{width:17px;height:17px;color:var(--tech,var(--accent,#e08a30))}
.share-toast.spin svg{animation:share-spin .8s linear infinite}
@keyframes share-spin{to{transform:rotate(360deg)}}

@media (max-width:560px){.btn.share-btn .lbl{display:none}.btn.share-btn{padding:0 13px}}
@media (max-width:760px){
  /* keep card/chart menus on-screen */
  .share-menu{left:0;right:auto}
  /* topbar menu drops from below the bar, pinned to the right edge */
  .topbar .share-menu{position:fixed;top:calc(var(--topbar-h) + 6px);right:14px;left:auto}
}