.ds-auth-gate {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--ds-space-6);
      /* Stronger veil so residual layout (if any) is not legible through the gate */
      background: rgb(15 23 42 / 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      /* No opacity transitions — toggling them reads as modal flicker. */
    }
    .ds-auth-gate.hidden { display: none !important; }
    /*
     * Busy mode (OAuth settle / signing out): blur only — hide the card so users
     * never see the form mount, unmount, and remount.
     */
    .ds-auth-gate--busy .ds-auth-gate-card {
      display: none !important;
    }
    .ds-auth-gate-card {
      width: 100%;
      max-width: min(22rem, 100%);
      /* Never use .modal { modalPop } on the auth card. */
      animation: none !important;
    }
    .ds-auth-gate-body {
      display: flex;
      flex-direction: column;
      gap: var(--ds-space-4);
      padding: var(--ds-space-2) var(--ds-space-6) var(--ds-space-6);
    }
    .ds-auth-gate-form {
      display: flex;
      flex-direction: column;
      gap: var(--ds-space-4);
    }
    .ds-auth-gate-oauth {
      display: flex;
      flex-direction: column;
      gap: var(--ds-space-2);
    }
    .ds-auth-gate-btn { width: 100%; }
    .ds-auth-gate-divider {
      margin: 0;
      text-align: center;
      font-size: var(--ds-text-caption);
      color: var(--ds-text-muted);
    }
    .ds-auth-gate-magic-link {
      display: flex;
      flex-direction: column;
      gap: var(--ds-space-2);
      align-items: stretch;
    }
    /* Match OAuth control height — .ds-input defaults read oversized in this card */
    .ds-auth-gate-magic-link .ds-auth-gate-email {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      height: 2.5rem;
      min-height: 2.5rem;
      max-height: 2.5rem;
      padding: 0 0.75rem;
      line-height: 1.25;
      font-size: var(--ds-text-body);
    }
    .ds-auth-gate-magic-link .ds-auth-gate-btn {
      width: 100%;
      min-width: 0;
      min-height: 2.5rem;
      height: 2.5rem;
      box-sizing: border-box;
    }
    .ds-auth-gate-oauth .ds-auth-gate-btn {
      min-height: 2.5rem;
      height: 2.5rem;
      box-sizing: border-box;
    }