/* Reusable documentation controls, using the incumbent site's tokens. */
.api-doc .docs-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 24px;
}
.api-doc .docs-heading .ph-title { margin: 0; }
.docs-copy-control { position: relative; flex: 0 0 auto; }
.docs-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 11px;
  border: 1px solid color-mix(in oklch, var(--ink-300), transparent 25%);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-700);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.docs-copy:hover {
  color: var(--red-400);
  border-color: var(--red-500);
  background: color-mix(in oklch, var(--red-500), transparent 94%);
}
.docs-copy:focus-visible, .api-copy:focus-visible {
  outline: 2px solid var(--red-500);
  outline-offset: 3px;
}
.docs-copy[aria-busy="true"] { cursor: wait; opacity: .65; }
.docs-copy [data-docs-copy-icon], .docs-copy [data-docs-copy-check] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.docs-copy .r3d-icon { width: 18px; height: 18px; }
.docs-copy [data-docs-copy-check],
.docs-copy[data-state="success"] [data-docs-copy-icon] { display: none; }
.docs-copy[data-state="success"] [data-docs-copy-check] { display: inline-flex; }
.docs-copy[data-state="success"] { color: var(--ink-900); }
.docs-copy[data-state="error"] { border-color: var(--red-500); }
.docs-copy-status {
  position: absolute;
  z-index: 7;
  top: calc(100% + 7px);
  right: 0;
  width: max-content;
  max-width: min(280px, calc(100vw - 48px));
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--ink-300);
  border-radius: 7px;
  background: var(--ink-050, var(--ink-100));
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 4px 14px color-mix(in oklch, var(--ink-900), transparent 90%);
  pointer-events: none;
}
.docs-copy-status:empty { visibility: hidden; }
@media (max-width: 520px) {
  .api-doc .docs-heading { gap: 12px 16px; margin-bottom: 48px; }
  .docs-copy { min-height: 44px; }
  .docs-copy-status { right: auto; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .docs-copy { transition: none; }
}