/* Crew invite join step (auth): link-with-code flow + manual code entry. */
@layer components {
  .auth-page--crew-join {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 120px);
    padding: var(--space-8) var(--space-4);
    background:
      radial-gradient(
        ellipse 120% 80% at 15% 0%,
        color-mix(in srgb, var(--color-primary) 28%, var(--color-bg)) 0%,
        transparent 55%
      ),
      radial-gradient(
        ellipse 100% 70% at 100% 40%,
        color-mix(in srgb, var(--color-info) 22%, var(--color-bg)) 0%,
        transparent 50%
      ),
      linear-gradient(165deg, var(--color-bg) 0%, var(--color-surface-muted) 100%);
  }

  .crew-join-card {
    position: relative;
    max-width: 26rem;
    overflow: hidden;
    border: 1px solid var(--color-slate-08);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(
      180deg,
      var(--color-surface) 0%,
      color-mix(in srgb, var(--color-surface) 92%, var(--color-primary-tint)) 100%
    );
  }

  /* One short Bello line — brand accent only; body stays readable (see docs/typography-bello.md). */
  .crew-join__accent {
    margin: 0 0 var(--space-2);
    font-family: var(--font-logo-wordmark);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-primary);
    letter-spacing: 0.02em;
  }

  .crew-join__title {
    margin-bottom: var(--space-4);
  }

  .crew-join-invite-panel {
    margin: 0 0 var(--space-6);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-info) 12%, var(--color-surface)) 0%,
      color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) 100%
    );
    border: 1px solid var(--color-slate-08);
    box-shadow: var(--shadow);
  }

  .crew-join-invite-panel__by {
    margin: 0 0 var(--space-4);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--color-text);
  }

  .crew-join-invite-panel__by strong {
    color: var(--color-primary);
    font-weight: 700;
  }

  .crew-join-invite-panel__what {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
  }

  .crew-join-invite-panel__meta {
    margin: 0 0 var(--space-3);
    padding: 0 0 0 var(--space-5);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
  }

  .crew-join-invite-panel__meta li + li {
    margin-top: var(--space-2);
  }

  .crew-join__next {
    margin-bottom: var(--space-5);
  }

  .crew-join-form .btn--block {
    margin-top: var(--space-2);
  }
}