/* ============================================================
   COPY CODE — an address or a command the reader copies with one click (site/src/components/CopyCode.astro, 27.10.2026)
   Requires: tokens.css
   From live /mcp «How to connect»: the connector URL inside a sentence, and a setup command in a «Terminal» box.
     .copy-code            inline: the text as a link, a copy mark after it; a click copies, the mark turns into a tick
     .copy-code--block     a box: a caption, then the code in monospace with a copy button at the right
   The copied state lasts 1.6 s and is announced to screen readers.
   ============================================================ */
.copy-code {
  --copy-ink: var(--color-text-link);
  all: unset;
  display: inline;
  color: var(--copy-ink);
  cursor: pointer;
  overflow-wrap: anywhere;
  padding-block: var(--space-xxs); /* the 24 touch height on phones, in its line (as the FAQ links) */
  border-radius: var(--radius-xs);
  transition: background-color var(--duration-hover) var(--ease-hover);
}
.copy-code__mark { display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.2em; vertical-align: -0.1em; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.copy-code { --mark: url("../icons/copy.svg"); }
.copy-code.is-copied { --mark: url("../icons/check.svg"); }
@media (hover: hover) { .copy-code:hover { background: color-mix(in srgb, currentColor 15%, transparent); } .theme-dark .copy-code:not(.copy-code--block):hover { color: var(--color-text); } } /* dark: white under the mouse, as text links on dark */
.copy-code:focus-visible { outline: var(--border-thin) solid currentColor; outline-offset: var(--border-thin); }

/* the box: a caption, then the code (live: Light Blue at 10 % behind, a 20 % line around the code) */
.copy-code-box {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent-light-blue) 10%, transparent);
}
.copy-code-box__label { margin: 0; }
.copy-code--block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-accent-light-blue) 20%, transparent);
  border-radius: var(--radius-xs);
  color: var(--color-text-accent-light-blue);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  transition: border-color var(--duration-hover) var(--ease-hover);
}
@media (hover: hover) { .copy-code--block:hover { background: none; border-color: color-mix(in srgb, var(--color-accent-light-blue) 50%, transparent); } }
.copy-code--block .copy-code__mark {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  border-radius: var(--radius-xs);
  background: none;
  -webkit-mask: none;
  mask: none;
  position: relative;
  background-color: var(--color-bg-grey);
}
.copy-code--block .copy-code__mark::after {
  content: '';
  position: absolute;
  inset: 25%;
  background: var(--color-text);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { .copy-code, .copy-code--block { transition: none; } }