@layer components {
  /* ─── Inviting a client ─────────────────── */

  .invite-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
  }

  .invite-steps__step {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    font-weight: 600;
    gap: 0.5rem;
  }

  .invite-steps__mark {
    align-items: center;
    background: var(--color-surface-tint);
    block-size: 2rem;
    border-radius: 50%;
    display: flex;
    font-size: 0.875rem;
    inline-size: 2rem;
    justify-content: center;
  }

  .invite-steps__step--current {
    color: var(--color-ink);

    .invite-steps__mark {
      background: var(--color-brand-fill);
      color: var(--color-ink-inverted);
    }
  }

  .invite-steps__step--done {
    color: var(--color-brand);

    .invite-steps__mark {
      background: var(--color-brand-tint);
    }
  }

  .invite-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Rails wraps a field with an error in div.field_with_errors — the
     wrapper mustn't alter the field's column, so it's made invisible. */
  .invite-form .field_with_errors {
    display: contents;
  }

  .invite-form__many {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .invite-form__fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
  }

  .invite-staff {
    align-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
  }

  .invite-staff:has(input:checked) {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
  }

  .invite-staff__check {
    accent-color: var(--color-brand);
    block-size: 1.125rem;
    inline-size: 1.125rem;
  }

  .invite-staff__avatar {
    block-size: 2.25rem;
    font-size: 0.75rem;
    inline-size: 2.25rem;
  }

  .invite-staff__text {
    color: var(--color-ink-muted);
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;

    strong {
      color: var(--color-ink);
      font-size: 1rem;
    }
  }

  .invite-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
  }

  .invite-chips__chip {
    background: var(--color-surface-tint);
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: 0.375rem 0.875rem;
  }

  .invite-form__message {
    line-height: 1.6;
  }

  .invite-form__info {
    align-items: flex-start;
    background: var(--color-brand-tint);
    border-radius: var(--radius-md);
    color: var(--color-ink-secondary);
    display: flex;
    gap: 0.625rem;
    margin: 0;
    padding: 1rem 1.25rem;

    .icon {
      color: var(--color-brand);
      flex-shrink: 0;
      margin-block-start: 0.125rem;
    }
  }

  .invite-form__foot {
    border-block-start: 1px solid var(--color-border-subtle);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-inline: -2rem;
    padding: 1.25rem 2rem 0;

    > :only-child {
      margin-inline-start: auto;
    }
  }

  /* The firm's own words on the invitation's page. */
  .invitation-message {
    background: var(--color-surface-tint);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;

    p {
      margin: 0 0 0.5rem;
    }

    p:last-child {
      margin: 0;
    }
  }
}