/* ============================================================================
   COMPONENT: invite-form — email + send button side by side when room allows
   (FEA-0009); stacks naturally on narrow screens via the cluster's wrap.
   ========================================================================== */

@layer components {
  .invite-form { align-items: flex-end; }
  .invite-form__field { flex: 1 1 16rem; }

  .invite-required-note {
    margin: 0;
    color: var(--danger);
    font-weight: var(--weight-bold);
  }

  .invite-chips {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block-start: var(--space-sm);
    min-block-size: 0.25rem;
  }

  .invite-chip {
    display: flex;
    align-items: center;
    gap: 0.75ch;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    font-size: var(--text-sm);
  }

  .invite-chip__email {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .invite-chip__status {
    flex: none;
    font-weight: var(--weight-bold);
  }
}