/* =========================================================
   copy-button — copies a string (here, an email) to the
   clipboard and confirms. Label + Heroicon; on success it
   enters a "copied" state (toggled via [data-copied="true"]).
   The email stays visible throughout — a small tooltip pops
   below the button to confirm the copy, so layout never shifts.
   ========================================================= */

.copy-button {
  /* Positioning context for the confirmation tooltip. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-03);
  min-height: 1.5rem;   /* 24px hit target */
  padding: var(--spacing-02) var(--spacing-03);
  /* body-03 (14px / line-height-160) with a light-weight override. */
  font-family: var(--font-family-roboto);
  font-size: var(--type-scale-02);   /* 14px */
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-160);
  color: var(--color-font-light);
  background: none;
  border: 0;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  transition: color 120ms ease;
}

.copy-button__label {
  white-space: nowrap;
}

/* Confirmation tooltip. Appears on copy ([data-copied="true"]) and replaces
   the old inline "Copied" overlay. Sits BELOW the button so it never clips
   against the viewport top when the app-bar is pinned. */
.copy-button__tooltip {
  position: absolute;
  top: calc(100% + var(--spacing-02));
  left: 50%;
  z-index: 1;
  padding: var(--spacing-02) var(--spacing-03);
  font-size: var(--type-scale-01);   /* 12px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-150);
  color: var(--color-background);
  white-space: nowrap;
  background: var(--color-font);
  border-radius: var(--border-radius-pill);
  opacity: 0;
  /* Start nudged up, settle into place — paired with the opacity fade. */
  transform: translate(-50%, calc(-1 * var(--spacing-01)));
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

/* Up-pointing arrow joining the tooltip to the button. */
.copy-button__tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: 4px solid transparent;
  border-bottom-color: var(--color-font);
  transform: translateX(-50%);
}

/* Heroicon, smaller than the 24px .icon default. Stroke inherits via currentColor. */
.copy-button__icon {
  width: 1.25rem;    /* 20px */
  height: 1.25rem;
}

/* Visually-hidden live region for the screen-reader announcement. */
.copy-button__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.copy-button:hover {
  color: var(--color-font);
}

.copy-button:active {
  color: var(--color-font);
}

.copy-button:focus-visible {
  outline: var(--accessibility-focus-outline-width)
           var(--accessibility-focus-outline-style, solid)
           var(--accessibility-focus-outline-color);
  outline-offset: var(--accessibility-focus-outline-offset);
  border-radius: var(--border-radius-pill);   /* keep the pill — overrides the global 5px focus default */
}

/* Copied state — set by the click handler for ~2s. Reveals the tooltip;
   the email and the button colour stay put. */
.copy-button[data-copied="true"] .copy-button__tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}