/* External link icon styling (chain icon) */
:root{
  --ext-link-icon-size: 0.95em;
  --ext-link-icon-gap: 0.25em;
}

/* Apply only when JS marks links as external (or class is set in Markdown/HTML) */
a.is-external{
  position: relative;
  white-space: normal;
}

a.is-external::after{
  content: "\1F517"; /* Unicode chain link 🔗 */
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 1;
  font-size: var(--ext-link-icon-size);
  margin-left: var(--ext-link-icon-gap);
  opacity: .85;
}

/* Optional: subtle hover emphasis */
a.is-external:hover::after{ opacity: 1; }

/* Allow opt-out */
a[data-no-external-icon]::after, a.no-external-icon::after{ display: none !important; }

/* Emphasized internal link pill for important in-site references
   Usage: <a href="/..." class="internal-presets-link">…</a>
   Keeps neutral design; does not interfere with CTAs (class is opt-in). */
a.internal-presets-link{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 18%);
  background: rgb(255 255 255 / 6%);
  color: inherit;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

a.internal-presets-link:hover,
a.internal-presets-link:focus{
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 28%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
}

/* Light background fallback: if parent declares a light bg, gently adjust */
[data-theme="light"] a.internal-presets-link,
body.light a.internal-presets-link{
  border-color: rgb(0 0 0 / 16%);
  background: rgb(0 0 0 / 4%);
}

[data-theme="light"] a.internal-presets-link:hover,
body.light a.internal-presets-link:hover{
  background: rgb(0 0 0 / 6%);
  border-color: rgb(0 0 0 / 28%);
}