/* ────────────────────────────────────────────────
   Core copy button — everything is overridable
───────────────────────────────────────────────── */
.copy-btn {
    justify-content: center;
    justify-self: center;
    justify-self: center;
    text-align: center;
    margin-top: -15px;

  /* ── Core layout ── */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;               /* space between emoji + optional text */

  /* ── Size (easy to override) ── */
  --size: 2.1em;
  width: var(--size);
  height: var(--size);
  font-size: calc(var(--size) * 0.62);   /* emoji scales nicely */

  /* ── Colors ── */
  --border: none;
  --hover-bg: var(--bg2);
  --active-bg: var(--bg2);
  --text: #333;
  --success: #2e7d32;

  background: linear-gradient(135deg, rgba(200, 213, 185, 0.15) 0%, rgba(143, 192, 169, 0.08) 100%);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 0.6em;

  /* ── Interaction ── */
  cursor: pointer;
  transition: 
    background 0.14s ease,
    transform 0.14s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;

  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  vertical-align: middle;
  margin-left: 0;
  touch-action: manipulation;
}

/* Hover / focus */
.copy-btn:hover,
.copy-btn:focus-visible {
  background: var(--hover-bg);
  transform: scale(1.14);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

/* Active / clicked */
.copy-btn:active {
  transform: scale(0.94);
  background: var(--active-bg);
}

/* Success state (shows briefly) */
.copy-btn--success {
  --bg: #e8ffe8;
  --text: var(--success);
  transform: scale(1.05);
}

/* ── Modifier classes for quick variations ── */

/* Small version (good inside headings) */
.copy-btn--small {
  --size: 1.7em;
  font-size: calc(var(--size) * 0.65);
  border-radius: 0.45em;
}

/* Larger / more prominent */
.copy-btn--large {
  --size: 2.8em;
  font-size: calc(var(--size) * 0.58);
  border-radius: 0.8em;
}

/* Pill / fully rounded */
.copy-btn--pill {
  border-radius: 999px;
}

/* With text instead of just emoji */
.copy-btn--with-text {
  padding: 0 0.8em;
  width: auto;
  --size: 2.2em;
}