/* =============================================================================
   Diagram sharing — a share affordance rendered directly over concept diagrams
   (inline treatise figures + the mind-map lightbox), so each diagram can be
   shared as its own object. Pairs with assets/diagram-share.js.
   ========================================================================== */

/* inline treatise figures get a hover-revealed share button in the corner */
figure.cfig{ position:relative; }
.dgm-share{
  position:absolute; top:10px; right:10px; z-index:5;
  width:38px; height:38px; border-radius:50%;
  border:1px solid #D4E0E5; background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  color:#1257E6; box-shadow:0 4px 14px rgba(14,22,34,.14);
  opacity:0; transform:translateY(-2px);
  transition:opacity .15s ease, transform .15s ease, background .15s, color .15s;
}
figure.cfig:hover .dgm-share,
.dgm-share:focus-visible{ opacity:1; transform:none; }
.dgm-share:hover{ background:#1257E6; color:#fff; border-color:#1257E6; }
.dgm-share svg{ width:18px; height:18px; }
/* touch devices have no hover — keep it visible */
@media (hover:none){ .dgm-share{ opacity:1; } }

/* lightbox foot variant (mind map) — matches the existing .mlb-go button */
.mlb-share{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:15px;
  color:#1257E6; background:#fff; border:1px solid #D4E0E5; border-radius:26px;
  padding:12px 18px; cursor:pointer; transition:.15s;
}
.mlb-share:hover{ border-color:#1257E6; background:#F2F7FF; }
.mlb-share svg{ width:17px; height:17px; }

/* ---- diagram share modal ---- */
.dgm-modal{ position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center;
  padding:22px; background:rgba(14,22,34,.55); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease; font-family:"Inter",system-ui,sans-serif; }
.dgm-modal.open{ display:flex; }
.dgm-modal.show{ opacity:1; }
.dgm-card{ position:relative; width:100%; max-width:420px; background:#fff; border-radius:20px;
  padding:22px; box-shadow:0 30px 80px rgba(14,22,34,.45); transform:translateY(8px) scale(.98);
  transition:transform .2s ease; }
.dgm-modal.show .dgm-card{ transform:none; }
.dgm-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(14,22,34,.06); color:#0E1622; font-size:20px; line-height:1; cursor:pointer; transition:.15s; }
.dgm-x:hover{ background:rgba(14,22,34,.12); }
.dgm-prev{ border:1px solid #D4E0E5; border-radius:12px; overflow:hidden; background:#F6FAFB; }
.dgm-prev img{ display:block; width:100%; height:auto; }
.dgm-title{ font-family:"Space Grotesk","Inter",sans-serif; font-weight:700; font-size:18px; color:#0E1622;
  margin:14px 0 2px; letter-spacing:-.01em; line-height:1.2; }
.dgm-sub{ font-size:12.5px; color:#71808F; margin-bottom:14px; }
.dgm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.dgm-act{ display:inline-flex; align-items:center; gap:8px; justify-content:flex-start;
  font-family:"Inter",system-ui,sans-serif; font-weight:600; font-size:13.5px; color:#23313C;
  background:#fff; border:1px solid #D4E0E5; border-radius:12px; padding:11px 13px; cursor:pointer;
  text-decoration:none; transition:.15s; }
.dgm-act:hover{ border-color:#1257E6; color:#1257E6; transform:translateY(-1px); }
.dgm-act svg{ width:17px; height:17px; flex:none; }
.dgm-act.primary{ grid-column:1 / -1; justify-content:center; background:#1257E6; color:#fff; border-color:#1257E6; }
.dgm-act.primary:hover{ background:#0E3FAE; color:#fff; }
.dgm-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(10px);
  background:#0E1622; color:#fff; font-size:13px; font-weight:600; padding:10px 18px; border-radius:22px;
  box-shadow:0 10px 30px rgba(14,22,34,.4); opacity:0; pointer-events:none; transition:.2s; z-index:3100; }
.dgm-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media(max-width:420px){ .dgm-grid{ grid-template-columns:1fr; } }