/* HumanSpark "Copy for AI" button. Tokens only - no hardcoded colours/sizes.
   Understated toolbar affordance; sits above (top) and below (bottom) content. */

.hs-copy {
  display: flex;
  align-items: center;
  gap: var(--hs-space-sm);
  margin-block: var(--hs-space-md);
}
.hs-copy--top    { justify-content: flex-end; }
.hs-copy--bottom { justify-content: flex-start; margin-block-start: var(--hs-space-lg); }

.hs-copy__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-xs);
  padding: 0.4rem 0.85rem;
  font-size: var(--hs-text-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--hs-navy);
  background: var(--hs-grey);
  border: 1px solid var(--hs-border-subtle);
  border-radius: var(--hs-radius, 6px);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.hs-copy__btn:hover {
  color: var(--hs-teal);
  border-color: var(--hs-teal);
}
.hs-copy__btn:focus-visible {
  outline: 2px solid var(--hs-teal);
  outline-offset: 2px;
}
.hs-copy__i { flex: none; }
.hs-copy__label { white-space: nowrap; }

/* Success state (JS adds .is-copied for ~2s). */
.hs-copy__btn.is-copied {
  color: var(--hs-teal);
  border-color: var(--hs-teal);
}

.hs-copy__status {
  font-size: var(--hs-text-2xs);
  color: var(--hs-teal);
  opacity: 0;
  transition: opacity .15s ease;
}
.hs-copy__status.is-shown { opacity: 1; }

/* Dark sections (e.g. local-ai, framework hub/archive) - flip the chrome to read on navy. */
.hs-section--dark .hs-copy__btn,
.hs-fw-hub .hs-copy__btn,
.hs-lai .hs-copy__btn {
  color: var(--hs-white);
  background: var(--hs-overlay-light);
  border-color: var(--hs-overlay-stronger);
}
.hs-section--dark .hs-copy__btn:hover,
.hs-fw-hub .hs-copy__btn:hover,
.hs-lai .hs-copy__btn:hover {
  color: var(--hs-teal);
  border-color: var(--hs-teal);
}