/* Click-to-copy fields. Shared by the guide tools and the public pages, so it
   lives on its own rather than inside either stylesheet. Colour comes from
   whatever palette the host page defines; the fallbacks keep it legible if a
   page has no tokens at all. */
.copy-field{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:none; padding:2px 4px; margin:-2px -4px;
  border-radius:3px; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
  transition:background .18s ease, color .18s ease;
}
.copy-field:hover{background:rgba(244,246,248,.06);}
.copy-field:focus-visible{outline:1px solid var(--aurora-teal); outline-offset:1px;}

.cf-value{overflow-wrap:anywhere;}

/* The icon stays faint until the row is hovered - it is an affordance, not a
   thing to look at fourteen times down a list. */
.cf-icon{
  display:inline-flex; flex:0 0 auto;
  opacity:.35;
  transition:opacity .18s ease, transform .18s ease, color .18s ease;
}
.cf-icon svg{width:13px; height:13px; display:block;}
.copy-field:hover .cf-icon{opacity:.8;}

.copy-field.copied{color:var(--aurora-green);}
.copy-field.copied .cf-icon{
  opacity:1; color:var(--aurora-green);
  transform:scale(1.18);
}
.copy-field.copy-failed{color:var(--lantern);}

@media (prefers-reduced-motion:reduce){
  .copy-field, .cf-icon{transition:none;}
  .copy-field.copied .cf-icon{transform:none;}
}

/* Touch has no hover, so the icon has to be visible from the start. */
@media (hover:none){
  .cf-icon{opacity:.6;}
}