/* Follow / Following (users/includes/member-follow.html): public profile header and the
   memory reader byline. Tokens only; every control is at least 44px tall to the touch. */
.member-follow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; }

.member-follow-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-space-12);
  padding: var(--ds-space-2) var(--ds-space-5);
  border: 1px solid var(--ds-brand);
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand);
  color: var(--ds-on-cta);
  font: inherit;
  font-size: var(--ds-font-size-label);
  line-height: var(--ds-line-height-label);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), border-color 150ms cubic-bezier(.4, 0, .2, 1);
}
.member-follow-button:hover { background: var(--ds-brand-hover); border-color: var(--ds-brand-hover); color: var(--ds-on-cta); }
.member-follow-button.is-following { background: var(--ds-card); border-color: var(--ds-input-border); color: var(--ds-ink); }
.member-follow-button.is-following:hover { background: var(--ds-surface); }
.member-follow-button:focus-visible { outline: 3px solid var(--ds-focus); outline-offset: var(--ds-space-1); }
.member-follow-button[aria-busy="true"] { cursor: progress; }

/* The byline's quieter pill: 32px to the eye, 44px to the finger. */
.member-follow-button--compact {
  min-height: var(--ds-space-8);
  padding: var(--ds-space-1) var(--ds-space-3);
  border-color: var(--ds-input-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-card);
  color: var(--ds-link);
}
.member-follow-button--compact:hover { background: var(--ds-surface); border-color: var(--ds-input-border); color: var(--ds-link-hover); }
.member-follow-button--compact.is-following { color: var(--ds-ink-soft); }
.member-follow-button--compact::after { content: ""; position: absolute; inset: calc(-1 * var(--ds-space-2)) 0; }

.member-follow-status:not(.sr-only) { color: var(--ds-error-text); font-size: var(--ds-font-size-caption); line-height: var(--ds-line-height-caption); }

@media (prefers-reduced-motion: reduce) {
  .member-follow-button { transition: none; }
}