/* Inline code styling shared across documentation and examples */

/* Inline code tokens */
:where(p, li, dd, figcaption) code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  padding: .15em .35em;
  border-radius: .3rem;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Subtle link styling ONLY for code-wrapped links */
a.code-link {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Make the code inherit the link decoration (avoids double underline) */
a.code-link > code {
  text-decoration: inherit;
}

/* Stronger cue on hover/focus */
a.code-link:hover,
a.code-link:focus-visible {
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

/* Keyboard focus ring that matches the chip */
a.code-link:focus-visible > code {
  outline: 2px solid color-mix(in srgb, currentColor 50%, transparent);
  outline-offset: 2px;
  border-radius: .3rem;
}

/* High-contrast / forced colors fallback */
@media (forced-colors: active) {
  a.code-link {
    text-decoration: underline;
  }
}

/* Visible keyboard focus without shifting layout */
a:focus-visible > code {
  outline: 2px solid color-mix(in srgb, currentColor 50%, transparent);
  outline-offset: 2px;
  border-radius: .3rem; /* match chip radius */
}